<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<div class="myswiper-wrapper">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=slide01" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/640x360/dfb9e2/000000?text=slide02" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/640x360/e2beb9/000000?text=slide03" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/640x360/d4e2b9/000000?text=slide04" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/640x360/b9e2cf/000000?text=slide05" alt="">
      </div>
    </div>
  </div>
</div>

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*
    カスタマイズ
    */
.swiper {
}

.swiper-wrapper {
  /*デフォルトのイージングを上書き*/
  transition-timing-function: linear !important;
}

.swiper-slide img {
  width: 100%;
}

const swiper = new Swiper(".swiper", {
  slidesPerView: 3.5,
  loop: true,
  speed: 3000,
  spaceBetween: 20,
  //自動再生で次のスライドへ切り替わる時間をなくす
  autoplay: {
    delay: 0
  },
  //この仕様のスライドの場合、ドラッグでの切り替えは不必要なことが多い
  allowTouchMove: false
});