jQueryを使わない高機能スライダープラグイン【Swiper】もちろんレスポンシブ対応

マークアップ

2018.01.19(Fri)

こんにちは。ディレクターの渡邊です。

以前『レスポンシブにも対応。とっても使いやすい jQueryスライダープラグイン【Slick】』という記事を書いたのですが、jQuery を使わない高機能なスライダープラグイン【Swiper】というのもあったので、こちらも紹介したいと思います。

Swiper

デモ

使い方

まずは、CSS・JSを読み込みます。

<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

次に、コンテンツとなるHTMLを記述します。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライダーA</div>
    <div class="swiper-slide">スライダーB</div>
    <div class="swiper-slide">スライダーC</div>
  </div>
    
  <div class="swiper-pagination">

  <!-- ナビゲーションボタンが必要なら要記載-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバーが必要なら要記載-->
  <div class="swiper-scrollbar"></div>
</div>

次にイニシャライズ(初期化)しますが、ここで注意点。
Swiperの公式サイトでは、</body>タグの直前に書くことを推奨しています。
少なくとも HTML よりは後に記載しないと動きません。

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // オプション
    direction: 'vertical',
    loop: true,

    // ページネーション
    pagination: {
      el: '.swiper-pagination',
    },

    // ナビゲーション
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // スクロールバー
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
</script>

以上で基本的な動きが実装可能となります。

『ここがすごい!Swiperの魅力【3選】』

個人的にすごい!と思ったSwiperの魅力を紹介します。

エフェクトがすごい

以前紹介した Slick のエフェクトは、横スライドとフェードだけでしたが、Swiper では他にも魅力的なエフェクトがあります。

3D Cube Effect

3D Coverflow Effec

3D Flip Effect

スライダー in スライダー

スライダーの中にさらにスライダーを入れることができます。
こういうのを知っておくと、提案時の表現の幅が広がりますね。

Nested Swipers

スライダー in パララックス

スライダーの背景をパララックスにもできます。
これも提案時の表現の幅が広がりますね。

Parallax

『主なオプション一覧』

よく使いそうなオプションの一覧をまとめました。
初期値を入れています。
詳細は公式サイトをご確認ください。

Swiper API

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // スライダーの方向を指定('horizontal' or 'vertical')
    direction: 'vertical',
    //スライドのスピード(ミリ秒)
    speed: 300,
    //trueに設定すると、アクティブなスライドの高さにその高さを適用します
    autoHeight: false,
    //入れ子になったSwiperでtrueに設定。親方向と同じ方向を使用するネストされたスワイパでのみ使用する
    nested: false,
    //エフェクトの設定("slide", "fade", "cube", "coverflow" or "flip")
    effect: slide,
    //trueの場合 、Swiperにカーソルを置くと、「グラブ」カーソルが表示されます
    grabCursor: false,
    //タッチイベントに反応するターゲット要素の指定(’container’[ swiper-container ]  or ‘wrapper’[ swiper-wrapper ])
    touchEventsTarget: 'container',
    //タッチ移動をトリガーする許容角度
    touchAngle: 45,
    //短いスワイプを無効にする場合はfalseに設定します
    shortSwipes: true,
    //長いスワイプを無効にする場合はfalseに設定します
    longSwipes: true,
    //無効にすると、スライダーは放したときにのみアニメーション表示され、指を押したまま移動することはありません
    followFinger: true,
  //「タッチ距離」がこの値よりも低くなるとスワイパーは動きません。pxで表します。
    threshold: 0,
  //前のスライド方向へのスワイプを無効にするにはfalseに設定します (左または上へ)
    allowSlidePrev: true,
  //次のスライド方向へのスワイプを無効にするにはfalseに設定します (左または上へ)
    allowSlideNext: true,
  //スワイプ中にリンク上で偶発的に望ましくないクリックが発生しないようにするには、 trueに設定します。
    preventClicks: true,
  //有効にすると、Swiperはすべての画像を強制的に読み込みます
    preloadImages: true,
  //有効にすると、すべての内部イメージ(<img>タグ)がロードされた後にスワイパが再初期化されます。(preloadImages: true の設定も必須)
    updateOnImagesReady: true,
  //連続ループモードを有効にするには、 trueに設定します。
    loop: false,

    // ページネーション
    pagination: {
      el: '.swiper-pagination',
    },

    // ナビゲーション
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // スクロールバー
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
</script>

まとめ

いかがでしたか、slick に比べると若干面倒くさいですが、その分多様性があり、WEBサイトの魅せ方に幅ができると思います。

皆さんも是非使ってみてください。