JavaScript

カルーセルスライダーの実装に便利なSwiper.jsの使い方【解説】

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

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

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

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

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

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

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

Swiper.jsを使うメリット
  • とにかく導入が簡単
  • オプションが豊富で柔軟
  • デザインもシンプルで動きが綺麗

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

Swiper.jsを導入する方法

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

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

Swiperの導入手順1|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の導入手順2|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の導入手順3|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を使ったカルーセルスライダーの解説は終了です。

カルーセルスライダーのまとめ
  • カルーセルスライダーを使えば少ないスペースに複数コンテンツを表示できる
  • カルーセルスライダーを実装するならSwiper.js一択
  • CDNを使えば外部のCSSやJavaScriptを高速に読み込める
  • JavaScriptでSwiperを初期化する
  • 初期化する際にオプションを設定できる
ABOUT ME
稲垣 貴映
サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA