【備忘録】Swiperでスライドがx番目の時に処理をさせる方法

2021年4月12日

【備忘録】Swiperでスライドがx番目の時に処理をさせる方法

こんにちは！
今回は前回に続き、カルーセルスライダーが簡単に作れるJavaScriptライブラリの
Swiperのスライドがx番目の時に処理をさせていく方法について備忘録を書いていきます。

この記事を読んでわかることは
・Swiperのスライドが1番目なら1番目の時の処理、2番めなら2番目の時の処理ができるよになります。

処理を分岐させる方法

See the Pen
Swiperスライドの何番目の時に処理 by 👓ならっち👓 (@naratch_)
on CodePen.

ボックス1に移動すると1枚目のスライドとアラート
ボックス2に移動すると２枚目のスライドとアラート
ボックス3に移動すると3枚目のスライドとアラート
の処理を実行するようにしています。

HTML、CSSに関しては前回の

あわせて読みたい

【備忘録】swiperのページネーションを文字にカスタマイズする方法【備忘録】swiperのページネーションを文字にカスタマイズする方法こんにちは！今回はカルーセルスライダーが簡単に作れるJavaScriptライブラリの Swiperのページネー...

をそのまま使っているので解説しません。

JavaScriptの解説をしていきます。

var mySwiper = new Swiper('.swiper-container', {               
    paginationClickable: true,
    speed: 1000,
    mousewheel: {
    invert: false,
                },
    pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
    renderBullet: function(index, className) {
    //中の文字を表示
    return '<span class="' + className + '">' + ["ボックス1", "ボックス2", "ボックス3",][index] + '</span>';　 }
               },
                   on: {
                   // 切り替わりのアニメーションが終了したとき
                   slideChangeTransitionEnd: function() {
                     swipe_action();
                   },
                 }
                });

function swipe_action() {　
    if (mySwiper.activeIndex == 0) {
    window.alert('1枚目のスライド');
  }
  if (mySwiper.activeIndex == 1) {
    window.alert('２枚目のスライド');
  }
    if (mySwiper.activeIndex == 2) {
    window.alert('３枚目のスライド');
  }
}

JavaScriptもほとんど前回と同じですがon:からコードを追加しています。

スライダーのonパラメータで定義することによって
スライダーの生成と同時にイベントを登録しておくことができるので
コードを短くできます。

var mySwiper = new Swiper(‘.swiper-container’, {

…

on: {
// 切り替わりのアニメーションが終了したとき
slideChangeTransitionEnd: function() {
処理を実行したい関数名
},
}
});

function (関数名){
if (mySwiper.activeIndex == 0) {
実行したい処理
}
if (mySwiper.activeIndex == 1) {
実行したい処理
}
if (mySwiper.activeIndex == 2) {
実行したい処理
}
}