プラグイン【Swiper】で作成するスライドショーいろいろ

JavaScript2017.11.2

最終更新日：2018.1.7 Update!!

まだまだクライアントワークで使用頻度が高いスライドショーですが、サイトデザインの多様化とともにいろんなバリエーションが求められるようになってきています。そんな要望に対して簡単にお答えすることができるプラグインが「Swiper」です。今回はこのプラグインで様々なスライドショーを簡単に作成する方法をまとめていきたいと思います。

スライドショー用のjavascriptプラグイン【Swiper】

Swiperはjavascriptのプラグインで、いろんな形のスライドショーを簡単に作成することができるのが大きな特長です。そして、jQureyを使わなくても動作するため、コンフリクトなどのトラブルもなく安心して使うことができます。【Swiper】 http://idangero.us/swiper/ 実装方法もいたってシンプルで、SwiperのCSSとjavascriptファイルをそれぞれロードし、スライドショー部分を下記のようにHTMLで構成します。ちなみにSwiperのCSSとjavascriptファイルはCDNでも利用できます。（上記公式サイト参照）【HTML】（一部抜粋）

<html>
  <head>
    <link rel="stylesheet" href="[FILE_PATH]/swiper.min.css">
  </head>
  <body>
 
  <!-- swiper start -->
  <div class="swiper-container">
 
    <!-- swiper スライド部分 -->
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ1"></div>
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ2"></div>
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ3"></div>
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ4"></div>
    </div>
 

    <!-- swiper ページャー部分 -->
    <div class="swiper-pagination"></div>
 
    <!-- swiper ナビゲーション部分 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
   </div>
   <!-- swiper end -->
 
   <script src="[FILE_PATH]/swiper.min.js"></script>
 </body>
</html>

次にCSSでSwiperのラップ要素の幅と高さを適宜指定しておきます。【CSS】

.swiper-container {
   width: 600px;
   height: 400px;
}

そしてJavaScriptでスライドショー部分の定義を関数内で指定していきます。ここではパラメーターごとに様々な仕様が設定できます。詳しくは公式サイトを参照していただくのですが、主なパラメーター設定をまとめていきたいと思います。まずは基本となるSwiperの初期化形を見ていきます。【javascript】

var mySwiper = new Swiper ('.swiper-container', {
 
   // スライドショーの設定（各パラメーターを入力）
   speed: 500,
   loop: true
 
   // ページャーの出力
   pagination: {
     el: '.swiper-pagination',
   },
 
   // ナビゲーションの出力
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   }
 
});

Swiperの各パラメーター

上記のコードで次にあげるパラメータを設定することで自由にスライドショーの仕様を決めることができます。以下一部になりますがよく使うものをまとめております。

direction	スライドの方向　／　horizontal：横方向、vertical：縦方向
speed	スライドの移動スピード　／　ミリ秒の数値で指定
spaceBetween	スライド間の余白　／　px換算の数値で指定
slidesPerView	表示区域内に表示させるスライドの枚数　／　枚数を数値で指定、auto
centeredSlides	表示区域内の中心にスライドを合わせる　／　true、false
loop	スライドを無限にループ表示させる　／　true、false
effect	スライドの表示方法を指定　／　slide、fade、cube、coverflow、flip
autoplay	スライドの自動再生　／　delay:3000などスライド開始までの時間をミリ秒で指定
breakpoints	レスポンシブ時の制御をブレークポイントで指定　／　320:{ パラメータ設定 }という形でブレークポイントを数値で指定