フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Swiper】クリックしてもページネーションが動かない原因と解決方法

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を設定するようにしましょう。