ひとつでほとんど対応できるスライダー「Swiper.js」

スライダーはいろいろなものがありますが現在一番便利なのは「Swiper.js」、jQueryに依存しないといのが素晴らしい。

いろいろなフレームワークを使う現在jQueryに依存しないというのはトラブルが少なく、パラメータが豊富でシンプルなものから凝ったスライドが実装出来ます。

ライブラリーの読み込み

下記よりダウンロードも可能ですがおススメはCDN。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>

最新バージョンはこちらで検索

現在最新の4.2.2の場合

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>

1 2	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>

基本のHTML構成

<!-- スライダー全体 -->
<div class="swiper-container">
    <!-- 全スライド -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <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 class="swiper-scrollbar"></div>
</div>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

...

</div>

</div>

スライダーのサイズを指定

サイズをCSSで追加します、ほとんどは100％幅での使用となるので

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-container {

width: 100%;

height: 100%;

}

JSの設定

  <script>
    var swiper = new Swiper('.swiper-container');
  </script>

var swiper = new Swiper('.swiper-container');

</script>

オプション

speed: 1000,　・・・　デフォルトは300、数字が大きくなると遅くなる。
loop: true,　・・・　スライダーが最後まで行ったら最初に戻る。

ナビゲーションを表示
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},

ページネーションを表示
pagination: {
el: ‘.swiper-pagination’,
},

たくさんのパラメータがあるので、詳しくは公式ドキュメントを参照してください。

＜例＞
オートプレイ、スピード1000、間隔4000、ナビゲーションを表示、ページネーションを表示

  <script>
    var swiper = new Swiper('.swiper-container', {
	  autoplay: {
	  delay: 4000,
	  },
	  speed: 1000,
	  loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
	  pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>