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

javascript

SHARE

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

Swiperとは？

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

参考Swiper – The Most Modern Mobile Touch SliderSwiper

Swiperのインストール方法

CDNでSwiper本体を読みこむ

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

CSSのCDNコード

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

JavaScriptのCDNコード

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

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

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

npm install swiper

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

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

Swiperを使ったスライドショーのコーディング方法

コーディングの流れ

Swiperを使用したスライドショーのコーディングは以下の流れで進められます。

  1. CDNまたはnpm経由でSwiperのスタイルシートとスクリプトを読み込む
  2. Swiperの専用クラスがついたスライドショーのHTMLタグを設置する
  3. Swiperを初期化するスクリプトを作成して、スライドショーを起動する

Swiperのスライドショーのサンプルコード

コピペしてすぐに実行できる形でソースコードを用意しました。コーディングを始める際の雛形としてご利用ください。

HTMLのソースコード

<!-- Slider main container -->
<div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide1" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide2" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide3" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide4" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide5" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide6" 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>
</div>

CSSのソースコード

<style>
        .swiper img {
                width: 100%;
                height: auto;
        }
</style>

JavaScriptのソースコード

スライドショーを初期化して動作させるためのスクリプトです。ループ再生、ページネーション、ナビゲーション、自動再生、レスポンシブに対応したプログラムにしています。

<script>
        const swiper = new Swiper('.swiper', {
                loop: true, //ループ表示
                pagination: {
                        el: '.swiper-pagination', //ページネーションを表示する要素
                },
                navigation: {
                        nextEl: '.swiper-button-next', //次へボタンを表示する要素
                        prevEl: '.swiper-button-prev', //前へボタンを表示する要素
                },
                autoplay: {
                        speed: 650 //自動再生のスピード
                },
                breakpoints: {
                        // when window width is >= 320px
                        768: {
                                slidesPerView: 3,
                                spaceBetween: 20
                        },
                }
        });
</script>

全体のサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <meta name="viewport" contnt="width=device-width">
        <title>Swiperテスト</title>
        <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
        <style>
                .swiper img {
                        width: 100%;
                        height: auto;
                }
        </style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide1" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide2" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide3" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide4" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide5" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="http://placehold.jp/640x360.png?text=slide6" 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>
</div>
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <script>
                const swiper = new Swiper('.swiper', {
                        loop: true, //ループ表示
                        pagination: {
                                el: '.swiper-pagination', //ページネーションを表示する要素
                        },
                        navigation: {
                                nextEl: '.swiper-button-next', //次へボタンを表示する要素
                                prevEl: '.swiper-button-prev', //前へボタンを表示する要素
                        },
                        autoplay: {
                                speed: 650 //自動再生のスピード
                        },
                        breakpoints: {
                                // when window width is >= 320px
                                768: {
                                        slidesPerView: 3,
                                        spaceBetween: 20
                                },
                        }
                });
        </script>
</body>
</html>

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を使う上での注意点

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

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

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

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

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

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

bxSlider（https://bxslider.com/）

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

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

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

まとめ

スライドショーをウェブ制作で使うなら、個人的にはSwiper一択だと思っています。細かな使い方まで覚えていくことでほとんどのケースに対応できるので、覚えていって損はないライブラリです。

コメントを残す

メールアドレスが公開されることはありません。

前の記事

GoogleChromeのショートカットキー
【作業効率UP!】開発時によく使うChromeショートカットキ…

次の記事

【コーディング】画像の書き出す形式（拡張子）を使い分ける