【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」を有効にした状態のデモになります。ページネーションのクリックが有効になっており、スライドが切り替わるようになっているかと思います。

DEMO

See the Pen
Swiper Clickable Pagination | JavaScript by ryohei (@intotheprogram)
on CodePen.

「Pagination」で指定することができるパラメータは他にもたくさんあります。英語ですが下記の公式サイトに詳しい説明がありますので、参考にしていただければと思います！

Pagination | SwiperAPI

最後に

「Swiper」は提供されているAPIの組み方を知ると色々なことが実現できます。英語で記載されているので最初は抵抗があるかもしれないですが、翻訳で理解できる簡潔な内容となっていますので、「Swiper」を使う場合にぜひ活用してみてくださいね！

以上、Swiperでページネーションのクリックを有効にしてスライドが切り替わるようにする方法のご紹介でした！