• Swiper

【Swiper】指定したindex（インデックス）番号のスライドがアクティブの時、処理を実行する方法

Swiperスライダーで指定したindex（インデックス）番号のスライドがアクティブの時、任意の処理を実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

指定インデックスがアクティブの時、任意の処理を実行

  const swiper = new Swiper(".swiper", {
    on: {
      // スライドの切り替わりアニメーションが終了した時に実行
      slideChangeTransitionEnd: function() {
       //5枚目のスライドを変数に代入。
　　const indexSlide = document.querySelector('.swiper-slide[aria-label="5 / 5"]');
       //5枚目のスライドがswiper-slide-activeクラスを持っていたら
        if(indexSlide.classList.contains("swiper-slide-active")) {
          // 任意の処理を実行
        }
      },
    }
  });

指定したインデックスのスライドがアクティブの時、任意の処理を実行するコード例です。

swiper実行関数のonイベント内でslideChangeTransitionEnd関数を定義。

上記関数を定義する事で、スライドの切り替わりアニメーションが終了した時に任意の処理を実行できます。

slideChangeTransitionEnd関数内で指定するインデックスのスライドを定義します。

swiper-slide要素のaria-label属性を指定する事で任意のスライドを指定できます。

上記要素に対してswiper-slide-activeクラスが付与されていたらという処理をif文で定義します。

if文の条件定義に指定するインデックスのスライド要素.classList.contains(“swiper-slide-active”)とすることで指定したindex（インデックス）番号のスライドがアクティブの時、任意の処理を実行できます。

以上で実装完了です。

まとめ

Swiperで指定したindex（インデックス）番号のスライドがアクティブの時、任意の処理を実行する方法について紹介しました。

以上で解説を終わります。