【Swiper】スライドショーのコーディング方法

ホームページにスライドショーを使いたい時は、Swiperというjavascriptライブラリが便利です。簡単なコーディングだけで多機能なスライドショーが実現できます。今回は、Swiperによるスライドショーの作り方を紹介していきます。

Swiperとは？

Swiperは高機能なスライドショーを簡単につくれるjavascriptライブラリです。豊富なAPIが揃っているので、使いこなせば、他のスライドショーライブラリよりも圧倒的に便利です。

Swiperの使い方

CDNでSwiper本体を読みこむ

head末尾にそれぞれリンクタグとスクリプトタグを挿入してください。

CSSのCDNコード

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

JavaScriptのCDNコード

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

NPM経由でインストールする方法

NPMでもインストールが可能です。

npm install swiper

以下の公式ドキュメントより、NPM経由でインストールする方法についての詳細が書かれています。

https://swiperjs.com/get-started#install-from-npm

HTMLのスライドショー部分に雛形を挿入する

スライドショーを設置したい部分に以下のHTMLの雛形を挿入してください。

HTMLのひな形ソースコード

適当な画像を各スライドにいれて、とりあえず実行できる形の雛形ソースコードを用意しました。そのまま。スライドショーを入れたい部分にコピペしてください。

ページネーション、ナビゲーション、スクロールバーも入れ込んでいます。


<!-- Slider main container -->
<div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                    <img src="http://placehold.jp/640x360.png" alt="">
            </div>
            <div class="swiper-slide">
                    <img src="http://placehold.jp/640x360.png" alt="">
            </div>
            <div class="swiper-slide">
                    <img src="http://placehold.jp/640x360.png" alt="">
            </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

JavaScriptのひな形ソースコード

スライドショーを初期化して動作させるためのスクリプトです。

こちらも、とりあえず実行できるように雛形ソースコードを用意しています。読み込んだJavaScriptのCDNよりも後にコピペして挿入してください。

スライドショーのループ、ページネーション、ナビゲーション、スクロールバー、自動再生に対応したプログラムです。

<script>
       const swiper = new Swiper('.swiper-container', {
          loop: true,

          // If we need pagination
          pagination: {
            el: '.swiper-pagination',
          },

          // Navigation arrows
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // And if we need scrollbar
          scrollbar: {
            el: '.swiper-scrollbar',
          },

          autoplay: {
                speed: 650
          }
        });
</script>

Swiperのカスタマイズ方法

詳細については公式ドキュメントを参考にしてください。

ループを許可

loop : true とすることでループを許可することができます。初期状態はfalseでループできません。

1枚辺りの表示枚数

slidesPerView : 数値 とすることで１画面に表示させるスライド枚数を指定することができます。初期状態は1です。

ブレークポイントの設定

以下のようにブレークポイントを数値で指定することで、特定の幅に応じてスライドショーの動作をカスタマイズできます。

breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }

ナビゲーション表示（前後ボタン）

次に進むボタンと前に戻るボタンを追加することができます。

各ボタンのセレクタを指定すると自動でプログラムが動きます。CSSを独自で書かずに元々のスタイルを利用する場合は、.swiper-button-next と.swiper-button-prev を利用しましょう。

navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
}

ページネーション

ページネーションを追加することができます。

ページネーションのセレクタを指定すると自動でプログラムが動きます。CSSを独自で書かずに元々のスタイルを利用する場合は、.swiper-pagination を利用しましょう。

pagination: {
    el: '.swiper-pagination',
}

自動再生

自動再生をオンにするには、autoplayを使いましょう。speedにミリ秒（ms）を指定することでスライドショーが自動再生される間隔を指定することができます。

autoplay: {
    speed: 650
}

その他のカスタマイズ方法

その他、アニメーションやサムネイル表示など複雑なカスタマイズにも対応しています。公式ドキュメントを参照ください。

他のスライドショーとの比較

他のスライドショーに比べて、Swiperは高機能で複雑な要件にも対応できるので断然おすすめです。私は、他のライブラリはほとんど使いませんが、参考になると思いますので、いくつか紹介しておきます。

bxSlider（https://bxslider.com/）

jQuery依存のスライドショーライブラリです。とにかくシンプルなので、ドキュメントで迷うことは少ないのが良い点かもしれません。jQuery使っている人からすると入口としてはわかりやすいかもしれないですね。

Slick（https://kenwheeler.github.io/slick/）

こちらもjQuery依存のスライドショーライブラリです。先ほどのbxSliderとは違い、Swiperに似た豊富な機能が提供されています。Swiperの方がドキュメントもAPIもともに充実していますので、わざわざ使う理由はないかもしれません。

その他Swiperを使う上での注意点

スライド内のbox-shadowが見切れてしまう

.swiper-containerクラスにはoverflow:hidden;が指定されているため、スライド内の要素にbox-shadowで影をつけると影が見切れてしまう場合があります。そういう場合は、スライド自体にpaddingの余白を設けてあげるといいです。.swiper-slideクラスの中にいきなりスライド要素をいれるのではなく、余白をもうけるためにラッパー要素を１個挟んであげるのがコツです。

スライド間の余白について

スライド間の余白については、元々のSwiperのspaceBetweenオプションを使う方法がありますが、個人的にこれはあまりお勧めしません。slidesPerViewなど他のカスタマイズをしていくと、崩れたり意図しない動作になってしまい、調整に時間がかかったりするためです。.swiper-slide内の余白で調整する方が、スタイルに関してはCSSで責任を持たせるという意味でもシンプルで柔軟に対応できます。