【Swiper】ページネーションのクリックを有効にしてスライドが切り替わるようにする

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperでページネーションのクリックを有効にしてスライドが切り替わるようにする方法をご紹介しています。

「Swiper」のページネーションをクリックしてスライドを切り替えるにはどうすればいいの？

とお悩みの方の参考になれば幸いです！

では、解説していきます。

Swiperはデフォルトではページネーションのクリックは有効になっていない

「Swiper」は高機能なスライダースクリプトです。設定次第でほとんどのスライダー要件を実現することができます。

ただ、高機能な反面、デフォルトの状態では最小限の設定のみとなっています。「Get Started」ページの内容を実装するだけでは、ほとんどの設定は機能しておらず、ページネーションをクリックしてもスライドは切り替わりません。

ちなみに、下記が「Get Started」で作ることができるデフォルトのスライダーになります。最低限の設定のみがオンになっている状態です。

See the Pen
Swiper Default Slider | JavaScript by ryohei (@intotheprogram)
on CodePen.

ページネーションのクリックでスライドが切り替わるようにする

では早速、クリックを有効にしてスライドが切り替わるようにしていきます。

ページネーションのクリックを有効にするためには、「pagination」のパラメータの一つである「clickable」を有効にする必要があります。下記の例を参考にパラメーターを追加してみてください。

HTML

<div class="swiper-container slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

JS

var slider1 = new Swiper ('.slider', {
    
    slidesPerView: 1,
    
    pagination: {
        el: '.swiper-pagination',
        clickable: true //この行を追記する
    },
});

下記は「clickable」を有効にした状態のデモになります。ページネーションのクリックが有効になっており、スライドが切り替わるようになっているかと思います。