【Swiper】ページネーションのクリックを有効にする方法

Swiperのページネーションをクリックしてもスライド画像が動かない・・・。クリックを有効にする方法が知りたい。

Swiperは、デフォルトだとページネーションのクリック機能は｢OFF｣になっているため、ドットをクリックしてもスライドは動きません。

そこで今回は、ページネーションのクリック機能をONに切り替える方法をお伝えします。

ページネーションのクリック機能をONにするには、JavaScriptファイルのpaginationにclickable: true;を追記すればOKです。

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    //ページネーションのクリックを有効にする
    clickable: true,
  },
});

すると、ページネーションのドットをクリックするとスライドを動かせるようになります。

上記のページネーションはサイズや色をカスタマイズ済みですが、デフォルトのドットサイズだと小さすぎてクリックしにくいと思うので、サイズをカスタマイズしてあげると親切かなと思います。

Swiperのページネーションをカスタマイズする方法については、下の記事で詳しく解説していますので参考にしてください。