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スライダーでスライドが切り替わるのを検知。任意の処理を実行する方法について紹介しました。
以上で解説を終わります。
目次