• Swiper

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

Swiperスライダーでスライドが切り替わるのを検知。

スライドされたら任意の処理を実行したい。

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

実装例を元に解説します。

実装サンプル

See the Pen
swiperでスライドを検知する by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スライドされたら、現在のスライド位置をスライダーの下部に表示してます。

実装手順な以下の通りです。

スライドを検知して任意の処理を実行

const swiper = new Swiper(".swiper", {
    on: {
    // スライドの切り替わりアニメーションが終了した時に実行
      slideChangeTransitionEnd: function() {
        const swiperPageNum = document.querySelector('p span');
        swiperPageNum.textContent = this.realIndex + 1;
      },
    }
});

スライドを検知して任意の処理を実行するコード例です。

Swiperオブジェクトにonプロパティを追加。

onプロパティ内で以下必要に応じで任意のメソッドを実行します。

slideChange
スライドが切り替わるのを検知

slideChangeTransitionEnd
スライドの切り替わりアニメーションが終了したのを検知

本記事では例としてslideChangeTransitionEndイベントを使いました。

pタグ内のspanタグにスライド番号を表示する処理を上記メソッドに定義。

スライドした時に上記メソッドが実行されていたら実装完了です。

まとめ

Swiperスライダーでスライドが切り替わるのを検知。任意の処理を実行する方法について紹介しました。

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