Swiperで無限ループスライダーを作る際の注意点

はじめに

この記事では、ライブラリ「Swiper.js」を使用して無限ループするスライダーを作る方法について、実現する際につまずいたポイントを詳しく説明します。

無限ループの実装ポイント

HTML

Swiperを使用する際は、HTMLの記述に一定のルールがあり、特定のCSSクラスを使用する必要があります。以下にコード例を示します。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  <div>
</div>

JavaScript

下にコード例を示します。無限ループを実現するために、次のスライドに切り替わるまでの時間をdelay: 0;と設定し、スライドが途切れなく切り替わるようにします。

document.addEventListener('DOMContentLoaded', function () {
  // スライド切り替えのトランジション速度（ミリ秒）
  const transitionSpeed = 5000;

  // すべてのSwiper要素を取得
  const swiperElements = document.querySelectorAll('.swiper');

  // Swiper要素が存在しない場合は処理対象外
  if (!swiperElements.length) {
    return;
  }

  // 各Swiper要素を初期化
  swiperElements.forEach(function (swiperElement) {

    // Swiper要素が存在しない場合は処理対象外
    if (!swiperElement) {
      return;
    }

    // Swiperインスタンスを生成してオプションを設定
    const mySwiper = new Swiper(swiperElement, {
      loop: true,                    // スライドを無限ループ
      slidesPerView: 'auto',         // スライドの表示数を自動調整
      speed: transitionSpeed,        // スライドのトランジション速度（ミリ秒）
      spaceBetween: 0,               // スライド間の余白（px）
      allowTouchMove: false,         // タッチ操作によるスライド移動を無効化
      autoplay: {
        delay: 0,                    // 待機時間を0にして連続再生
        disableOnInteraction: false, // ユーザー操作後も自動再生を継続
      },
    });

    swiperElement.swiperInstance = mySwiper;
    swiperElement.dataset.transitionSpeed = transitionSpeed;
  });
});

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

CSS

最もつまずいた点は、Swiperの標準のtransition-timing-function: ease;に気付かなかったことです。
この設定により、スライドが一定速度で移動するのではなく、一旦停止するような動きになります。
そのため、以下のコードを追加して、スライドが一定速度で次のスライドに切り替わるように調整します。

.swiper .swiper-wrapper {
  transition-timing-function: linear; // 一定速度での移動を設定
}