カルーセルスライダーの実装に便利なSwiper.jsの使い方【解説】｜Playground発！アプリ開発会社の技術ブログ

WebサイトやWebアプリを作っていると「カルーセルスライダー」を使いたい場面ってありますよね？

カルーセルスライダーは複数のコンテンツを省スペースで見せたい時に便利です。

ただしスライダー後半のコンテンツは見られる確率が低くなるので、なんでもかんでも使えばいいというわけではありません。

ということでこんにちは、株式会社Playground Webシステム開発部の稲垣です！

カルーセルスライダーはCSSとJavaScriptを書いて自作できます。

しかし、それよりも「Swiper.js」というライブラリが最高に便利です。

正直Swiper.jsを使える環境なら、カルーセルスライダーを自作する必要はまったくないと思います。

Swiper.jsを使うメリット

とにかく導入が簡単
オプションが豊富で柔軟
デザインもシンプルで動きが綺麗

ということでSwiper.jsの使い方を解説をしていきます！

1 Swiper.jsを導入する方法
2 Swiper.jsのオプションを使いこなそう

Swiper.jsを導入する方法

Swiper.jsの導入手順を解説していきます。

Swiperの導入手順

CDNを使ってSwiper.jsのCSSとJavaScriptを読み込む
HTMLでカルーセルスライダーの構造を作る
JavaScriptでSwiper.jsを初期化する

Swiperの導入手順１｜CDNでCSSとJavaScriptを読み込もう

Swiper.js用のcssファイルとjsファイルは、CDNを使ってindex.html内で2行を追加するだけで読み込めます。

cssは<head>タグ内に、jsは<body>タグ内の最下部にそれぞれ記述します。

index.html

<head>
  <!-- 中略 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
</head>
<!-- 中略 -->
<footer>
  <!-- 中略 -->
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<!-- 中略 -->
</body>

公式サイトからファイルをダウンロードしてローカルから読み込んでも良いですが、CDNの方がメリットがあります。

CDNを使うメリット

読み込みが速い
ローカルファイルの量を減らせる
バージョン管理が楽（HTMLの記述を変えるだけで済む）

Swiperの導入手順２｜HTMLでカルーセルスライダーの構造を作ろう

HTMLでスライダーの構造を作るにあたり、Swiperでは以下5つの要素を覚えておきましょう。

Swiperでよく使う要素

container（必須）：カルーセルスライダー全体を包むコンテナ
wrapper（必須）：各スライドを内包するコンテナ（箱みたいなイメージ）
slide（必須）：1スライド（パワポのスライドと同じイメージ）
pagination（任意）：何スライド目を表示しているか分かる
button-prev/next（任意）：前へ（次へ）ボタンとなるナビゲーション要素

実際にHTMLを書くと以下のようになります。

index.html

<!-- Slider全体のコンテナ -->
<div class="swiper-container">
    <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
    <div class="swiper-wrapper">
        <!-- Slideさせたいコンテンツ -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- ページネーション（※省略可） -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン（※省略可） -->
    <div class="swiper-button-prev"></div> 
    <div class="swiper-button-next"></div>
</div>

このHTML構造とCSSクラス名を間違えるとうまく表示されないので注意してください。

Swiperの導入手順３｜JavaScriptファイル内でSwiperを初期化しよう

Swiper.jsはCDNでJavaScriptを読み込むだけでは使えません。

Swiperを初期化する必要があります。

JavaScriptファイルを使ってSwiperを初期化するコードがこちらです。

/js/carousel.js

const carouselModule = (() => {
  return {
    configure: () => {
      const mySwiper = new Swiper('.swiper-container', {
        // ここからはオプションを記述していきます
      })
    }
  }
})()

carouselModule.configure()

ただしこのままだと綺麗に表示されません。

色々なオプションを設定して、表示を整えていきましょう。

Swiper.jsのオプションを使いこなそう

Swiperにはたくさんのオプションが用意されていて、以下のように便利な機能が使えます。

例えば以下のような機能です。

ページネーション（現在のスライドが何番目なのか）を表示
前へ or 次へボタンなどナビゲーションを表示
レスポンシブ対応

それぞれ解説していきます！

ページネーションとナビゲーションを表示しよう

上述のHTMLで、pagination用とnavigation用の<div>要素を書きましたね。

それらを機能させるためにはJavaScriptファイルに以下の記述を追加します。

/js/carousel.js

const carouselModule = (() => {
  return {
    configure: () => {
      const mySwiper = new Swiper('.swiper-container', {
        // ここから
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // ここまでを追加
      });
    },
  }
})();

carouselModule.configure()

画面幅に応じてスライド数を変えよう（レスポンシブ対応）

スマホだとスライドは1枚だけど、PCのように幅広いブラウザならスライドを複数枚見せたいって時ありますよね。

Swiperでスライド数とレスポンシブ対応するときのコードは以下です。

/js/carousel.js

const carouselModule = (() => {
  return {
    configure: () => {
      const mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 3,    // 追加...1度に表示するスライド枚数
        spaceBetween: 10,    // 追加...スライド間の余白
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // ブレイクポイントを設定（1023px以下の時に適用されるオプション）
        breakpoints: {
          1023: {
            slidesPerView: 1,
            spaceBetween: 0,
          }
        }
        // ここまで追加
      });
    },
  }
})();

carouselModule.configure()

この設定なら、画面幅が1024px以上ならスライドが3枚並び、1023px以下ならスライドが1枚のみ並びます。

その他オプションの解説

その他にも便利なオプションがあるのでざっと紹介します。

その他の便利なオプション

autoplay：スライドが自動で動き、delayで時間間隔を調整できる
speed：スライドした時の動く速さを設定できる
loop：trueにすると最終スライドの次が先頭スライドに戻ってループする

すべて設定したら以下のコードになります。

/js/carousel.js

const carouselModule = (() => {
  return {
    configure: () => {
      const mySwiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 10,
        speed: 1000,
        centeredSlides: true,
        autoplay: {
          delay: 5000,
        },
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
          1023: {
            slidesPerView: 1,
            spaceBetween: 0,
            autoplay: {
              delay: 3000,
            },
          }
        }
      });
    },
  }
})();

他にどんなオプションがあるのか、あるいはオプションの仕様をもっと詳しく知りたい人は、Swiperの公式ドキュメントを読んでみてください。

以上でSwiper.jsを使ったカルーセルスライダーの解説は終了です。

カルーセルスライダーのまとめ