まだまだクライアントワークで使用頻度が高いスライドショーですが、サイトデザインの多様化とともにいろんなバリエーションが求められるようになってきています。そんな要望に対して簡単にお答えすることができるプラグインが「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:{ パラメータ設定 }という形でブレークポイントを数値で指定

 

---

  いかがでしょうか、各パラメーターを組み合わせて自分好みの仕様で簡単にカスタマイズできるのは便利ですね。この他にもいろんな設定が可能です。今回のサンプルはこちらに用意しましたのでご参考に！