【Swiper】クリックしてもページネーションが動かない原因と解決方法
Swiperはスライダーを簡単に作ることが出来る人気プラグインです。
そんなSwiperでページネーションを作成した時にそのページネーションをクリックしても動きませんでした。
少し調べてみるとSwiperでページネーションを作成した場合、動作させるための設定が必要と分かりました。
この記事ではSwiperで作成したページネーションが動作しない原因と動作させる方法をご紹介したいと思います。
原因
Swiperで作成したページネーションは作成するだけではそのページネーションは動作しません。
まずはSwiperで作成したページネーションの実装サンプルを見てみましょう。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ページネーションをクリックしても反応しませんね。
ページネーションを作成しただけでは、それは現在何枚あるスライダーのうち何枚目を表示しているかを確認するためだけの役割になります。
しかし、スライダーにこのようなページネーションがあるとクリック出来るものとの認識が一般的ですね。
解決方法
Swiperで作成したページネーションを動作させるためにはclickable
のオプション設定をtrue
に設定します。
そうすることでページネーションをクリックすることで該当するスライダーへ移動させることが出来るようになります。
pagination: {
el: '.swiper-pagination',
clickable: true,
},
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ページネーションが動作するようになりましたね。
まとめ
いかがですか?
Swiperではページネーションを作成しただけでは機能しません。
ページネーションを作成した場合はclickable: true
を設定するようにしましょう。