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

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

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

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

目次

処理を分岐させる方法

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

ボックス1に移動すると1枚目のスライドとアラート
ボックス2に移動すると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('2枚目のスライド');
  }
    if (mySwiper.activeIndex == 2) {
    window.alert('3枚目のスライド');
  }
}
           

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) {
実行したい処理
}
}

slideChangeTransitionEnd
切り替わりのアニメーションが終了したときの処理

他にもスライドした時の処理は

slideChange
スライドが切り替わった時の処理

slideChangeTransitionStart
切り替わりのアニメーションが開始されたときの処理

他にもイベントはたくさんありますが今回使っていなかったので
詳しく知りたい方は公式ドキュメントの方を見てください。

SwipeySwiper公式サイト。イベントドキュメント

リンク

if (mySwiper.activeIndex == 0) {実行したい処理}

activeIndex
が現在表示されてるスライドが何番目かを返す処理なので
現在のスライドが0番目(1枚目)であれば0番目(1枚目)の処理をする。

ややこしくなってしまいますがスライドは
0,1,2,3…という配列になっているので
0が1枚目のスライド
1が2枚目のスライド
2が3枚目

になっていきます。

そのため
if (mySwiper.activeIndex == 1) {実行したい処理}
で2枚目のスライドの処理

if (mySwiper.activeIndex == 2) {実行したい処理}
で3枚目のスライドの処理
となっています。

後は実行したい処理を書いていけば実行されていきます。
jQueryなどと組み合わせればより短いコードで様々な処理を実行できます。

ポートフォリオを作るのに当たって
いろんな処理をしているため見てみてください。

ならっちポートフォリオポートフォリオです。JavaScriptライブラリのSwiperを使いつつ、CSSアニメーションを使い動きのあるポートフォリオに仕上げました。

リンク

以上がスライドの何番目の時に処理する方法でした。

今回の処理を実行するのに参考にしたサイト

便利すぎ!jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう 便利すぎ!jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう

リンク

swiper.js6系使ってみたからそのオプションについて(v6.0.4)れを考慮してもかなり使いやすいスライダーだと思う。 実装について. 公式ページのここに書いてある。

リンク

まとめ

Swiperでスライドがx番目の時に処理をさせる方法でした。

分岐の処理のやり方をする方法を説明しているサイトはあったのですが
具体的に書き方を載せているサイトがなかったので、色々と試しながらやったため
苦戦しました。
同じ用に苦戦しないように、分かりづらいですが参考になれば幸いです!

あわせて読みたい
【備忘録】swiperのページネーションを文字にカスタマイズする方法 【備忘録】swiperのページネーションを文字にカスタマイズする方法 こんにちは! 今回はカルーセルスライダーが簡単に作れるJavaScriptライブラリの Swiperのページネー...
あわせて読みたい
【備忘録】WordPressのテーマ「JIN」のブログカードカスタマイズ-外部リンク- 【備忘録】WordPressのテーマ「JIN」のブログカードカスタマイズ-外部リンク-   こんにちは! 今回はWordPressのテーマ「JIN」のブログカードのカスタマイズについ...
あわせて読みたい
【備忘録】MW WP Formのプラグインのファイル選択をカスタマイズする方法 こんにちは!今回はMW WP Formのプラグインのファイル選択をカスタマイズする方法についての備忘録です。 MW WP Formのフォームを作るプラグインは非常に便利なのでCSS...
あわせて読みたい
【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法 【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法 こんにちは! 今回からメモを『備忘録』という風にしていきます。 理由はこっちの方がかっこいいでは...

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次