Written by Kasumi

【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(インデックス)番号のスライドがアクティブの時、任意の処理を実行する方法について紹介しました。

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

目次

関連記事

Swiper

Swiperスライダーでスライドが切り替わるのを検知。任意の処理を実行する方法

更新日:2023.01.25
3663
Swiper

【swiper】スライド時にズーム機能をつけれるスライダーを実装【簡単】

更新日:2022.11.25
3003
Swiper

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

更新日:2022.11.25
4515
Swiper

【Swiper】デバイス幅でオプション設定を切り替える方法【ブレイクポイントを設けよう】

2022.11.25
4267