swiperで複数の画像を永遠ループ＋画像の左右の余白をつけたい。

Question

実現したいこと

swiper で複数の画像を永遠ループして画像サイズを画面幅に合わせて表示させたい。画像の左右の余白をつけたい。

前提

発生している問題・エラーメッセージ

pc画面では問題ないが、スマホサイズにすると余白がなくなってしまう。
エラーメッセージ

/*html*/
<div class="swiper swiper2">
  <div class="swiper-wrapper slider2-wrapper">
    <div class="swiper-slide slider2-slide">
      <img src="../img/staff-slider1.png" alt="">
    </div>
    <div class="swiper-slide slider2-slide">
      <img src="../img/staff-slider2.png" alt="">
    </div>
    <div class="swiper-slide slider2-slide">
      <img src="../img/staff-slider3.png" alt="">
    </div>
    <div class="swiper-slide slider2-slide">
      <img src="../img/staff-slider4.png" alt="">
    </div>
    <div class="swiper-slide slider2-slide">
      <img src="../img/staff-slider5.png" alt="" />
    </div>
  </div>
</div>

/*css*/

.slider2-wrapper{
  transition-timing-function: linear;
}
.slider2-slide img {
  display: block;
  max-width: 305px; /*PC画面の時は最大幅３０５pxで画面幅に合わせて縮小で問題なし*/
  @include mq(sp){
  width: 200px;  /*スマホ画面の時は固定幅２００pxで指定したい*/
  }
}

/*jQuery*/
const swiper2 = new Swiper(".swiper2", {
  loop: true,
  speed: 9000,
  allowTouchMove: false,
  autoplay: {
    delay: 0,
  },
  breakpoints: {
    375: {
      slidesPerView: '2',
      spaceBetween: 20
    },
    600: {
      slidesPerView: 3,
      spaceBetween: 20
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 20
    },
    1025: {
      slidesPerView: 4,
      spaceBetween: 20
    },
  },
});

試したこと

max-width:200px;にすると余白は空いたので問題ないが２００px以下になってしまうため、width:200px; にしました。そうすると余白がなくなってしまった。そのためjQueryにてspace-Betweenで余白を設けたが余白はつきませんでした。
他にも調べましたがspace-Betweenの情報しか出てこなくて解決できず困っています。
お手数ですがご回答いただけると嬉しいです。よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

『スマホ画面の時は固定幅２００pxで指定したい』ということですが、spaceBetween:20,slidesPerView:2ですから、200+20+200=420px が必要になります。
一方で、iPhone 14 pro の幅が 390px ですから、これは画面幅が足りないので無理、ということにならないですか？

Answer 1

ご返信ありがとうございます。
slidesPerView:2から
slidesPerView: '1.8',spaceBetween: 10　へ変更したら上手く表示できました。
助かりました。ありがとうございました。