Written by Kasumi

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

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

目次

関連記事

Swiper

Swiperスライダーで外部の関数から動的にスライド位置を変更する方法

更新日:2022.11.25
457
Swiper

Swiperで現在のスライド番号と総数を表示する方法

更新日:2022.11.25
313
Swiper

Swiperのデフォルト矢印を消して、任意の画像に変更する方法

更新日:2022.11.26
684
Swiper

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

2022.11.25
309