【Swiper】自動で横に流れる無限スクロールを簡単に実装する方法

Swiperで画像等を途切れなく横に流れる表示を実装する方法です。

実装例

See the Pen Untitled by keiichisawai (@sawakei) on CodePen.

思い通りに動かない時は

Swiperで比較的簡単に実装できますが、ちょっとした事が原因で、意図したとおりに動かない事があります。Swiperで無限スクロールを実装するうえで注意した方が良い所は以下になります。

スライドの数や横幅が足りず、表示領域を埋めきれていない

See the Pen swiperで無限スクロールを実装する（動かない例） by keiichisawai (@sawakei) on CodePen.

上記のコードの場合、スマホ等の横幅が狭い時は上手く動きますが、PC等の横幅が広い時は上手く動きません。これは要素が足りないと無限スクロールが成立しないからです。この場合、HTML上の要素を増やす（この場合画像）かjavaScriptで疑似的に要素を増やす事で解決できます。

document.addEventListener('DOMContentLoaded', () => {

  const wrapper = document.querySelector('.swiper-wrapper');
  const slides = wrapper.innerHTML;

 　// スライドを複製する(重要)
  wrapper.insertAdjacentHTML('beforeend', slides);

  // Swiperを初期化
});

Swiperのスライドの計算が上手くいってない

.swiper-slide {
  flex-shrink: 0;
  /*重要*/
  width: auto !important; 
}

.swiper-slideクラスのwidth: auto;の指定が必須なのですが、swiper側のCSSの方が優先されてしまい、上手くいかない事があります。
ここでは、分かりやすく!importatを指定していますが、.swiper-slide[class]などで詳細度を高める方法がより良いと思います。

Swiperでの実装では、幅の指定に気をつける

個人的にSwiperでスライドを実装するとき、スライドを構成する要素が表示する領域を満たしてないため上手く動かない等、幅に関する事が原因で詰まる事が多い印象です。ですので、スライドの幅や数を意識することで、狙った挙動になると思います。

コード全体

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<script
  src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"
  defer
></script>

<div class="swiper" id="js-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/237/400/200"
        width="400"
        height="200"
        alt=""
      />
    </div>
    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/238/400/200"
        width="400"
        height="200"
        alt=""
      />
    </div>
    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/239/400/200"
        width="400"
        height="200"
        alt=""
      />
    </div>
    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/240/400/200"
        width="400"
        height="200"
        alt=""
      />
    </div>
  </div>
</div>

.swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex-shrink: 0;
  width: auto;
}

.swiper-slide img {
  display: block;
}

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.swiper-wrapper');
  const slides = wrapper.innerHTML;

  // スライドを複製して水増し
  wrapper.insertAdjacentHTML('beforeend', slides);

  // Swiperを初期化
  new Swiper('#js-swiper', {
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 24,
    speed: 5000,
    autoplay: {
      delay: 0,
      disableOnInteraction: false
    },
    allowTouchMove: false
  });
});

トラカッパのサイト