[Javascript] めちゃくちゃ便利！スライダーライブラリはSwiperで決まり！

2017.01.23
2019.09.11

どうもこんばんは！HYPのこうじです。

皆さんは、ギャラリーのライブラリは何を使っていますか？
最近はこういったスライダーやカルーセルといったライブラリは様々な種類がありますね。
さらに最近でいえばレスポンシブ対応を求められる場合が非常に多いので、ちょっと古いライブラリとかになると、レスポンシブ対応されていなかったりでどうにも歯がゆい思いをすることがあります。

僕は以前はSLICKというJQueryライブラリを使っていました。

jQueryライブラリ slick

ですが、他にもっと自分にあった使い勝手のライブラリはないもんかと探した結果…ありましたよ！あったんです！！
それで今回ご紹介するSwiperというライブラリです！

Swiper Most Modern Mobile Touch Slider

Swiperのココがいい！

Vanilla JSで使用できる

よく巷にあるスライダーライブラリは殆どjQuery使用前提が多いですが、こちらはなんとjQueryとVanilla JSどちらも利用出来ます！

jQueryは非常に便利ですが、ちょっとしたスクリプトなら使わない方が軽いのでそういった場合わざわざスライダーの為だけにjQueryを読み込ませる必要が無くなるので非常に使い勝手が良いです。

スライドエフェクトが豊富

と言っても、大概左右のスライドしか使いませんけどね…。
上下はもちろん、キューブ型だったり、立体移動だったり、設定を変えるだけで様々なエフェクトが出来ます。
もちろんフェードも可能です！

各パーツのデザインがいじりやすい

クラス振りを間違わなければ各パーツを比較的簡単に自分の好きなデザインに変更出来ます。
例えば、ナビゲーションの左右の矢印画像をSVGにすることも出来ますし、ページネーションのドットをサムネイル画像に変える事も可能です。

もちろんレスポンシブ対応

これは必須ですね！ブレークポイントも設定出来るので、デバイス毎に設定を変更する事も可能です。これは便利！
本件と関係ありませんが、最近のモール型EC用の外部サービスはなぜかレスポンシブ対応してくれていないので非常に使いづらいです！

Swiperのココがよくない！

Chromeで時々挙動がおかしい

なぜか初期設定だと、Chrome限定でリンクがクリック出来なくなる現象が発生します。
でもオプションで回避出来るのでデメリットとは言えませんが…。

早速使ってみよう！

ライブラリをダウンロード

まずはライブラリサイトから、ファイルをダウンロードしてきましょう。
トップページのダウンロードからサクッと落とせます。

サイトに設置

スタイルシートファイルを追加

<head>内にスタイルシートファイルを設置。
ファイルは解凍フォルダ内のdist¥cssフォルダに入っています。
特にいじくり倒さない人はswiper.min.cssの方が軽いのでオススメです。

[html] <head> ･･･ <link rel="stylesheet" href="アップロード先パス/swiper.min.css"> ･･･ </head> [/html]

ライブラリファイルを追加

<head>内にライブラリファイルを設置。
ファイルは解凍フォルダ内のdist¥jsフォルダに入っています。
特にいじくり倒さない人はswiper.min.jsの方が軽いのでオススメです。
もちろんjQuery派な人はswiper.jquery.min.jsですよ！

[html] <head> ･･･ <script src="アップロード先パス/swiper.min.js"></script> ･･･ </head> [/html]

htmlタグを入力

必要なパーツに合わせて追加削除して下さい。

[html]
<div class="swiper-container">
<!– スライダー部分 –>
<div class="swiper-wrapper">
<div class="swiper-slide">スライダー1</div>
<div class="swiper-slide">スライダー2</div>
<div class="swiper-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>
[/html]

ライブラリを開始させる

Vanilla JS

タグが読み込まれていないと意味が無いので</body>の直前に入れてください。

[js]
var mySwiper = new Swiper
(
    '.swiper-container', // 適用させる要素のセレクターを設定。
    {
      pagination: '.swiper-pagination',  // ページネーションを使う場合適用要素のクラスを指定。
      nextButton: '.swiper-button-next',  // ナビゲーションボタンを使う場合次へボタン要素のクラスを指定。
      prevButton: '.swiper-button-prev',  // ナビゲーションボタンを使う場合前へボタン要素のクラスを指定。
      scrollbar: '.swiper-scrollbar',  // スクロールバーを使う場合適用要素のクラスを指定。
      breakpoints:  // ブレイクポイントを設定する場合。
      {
          1024: {  // 横幅が1024px以下で、下記設定に書き換える。
              slidesPerView: 4,
              spaceBetween: 40
          },
          768: {  // 横幅が768px以下で、下記設定に書き換える。
              slidesPerView: 3,
              spaceBetween: 30
          },
      }
    }
);
[/js]

jQuery

[js]
$(document).ready(function ()
{
    var mySwiper = new Swiper
    (
        '.swiper-container', // 適用させる要素のセレクターを設定。
        {
          pagination: '.swiper-pagination',  // ページネーションを使う場合適用要素のクラスを指定。
          nextButton: '.swiper-button-next',  // ナビゲーションボタンを使う場合次へボタン要素のクラスを指定。
          prevButton: '.swiper-button-prev',  // ナビゲーションボタンを使う場合前へボタン要素のクラスを指定。
          scrollbar: '.swiper-scrollbar',  // スクロールバーを使う場合適用要素のクラスを指定。
          breakpoints:  // ブレイクポイントを設定する場合。
          {
              1024: {  // 横幅が1024px以下で、下記設定に書き換える。
                  slidesPerView: 4,
                  spaceBetween: 40
              },
              768: {  // 横幅が768px以下で、下記設定に書き換える。
                  slidesPerView: 3,
                  spaceBetween: 30
              },
          }
        }
    );
});
[/js]

よく使うオプション

僕が良く使うオプションをまとめてみました。
正直使いきれてないくらい細かい設定やイベントを使用できるので、本家でどういう事ができるのか見ているだけでもワクワクしてきますね！
まぁ英語ですが…。

オプション名	説明	設定例
autoplay	自動で指定秒数ごとにスライドさせてくれます。設定する単位はミリ秒(1秒=1000ミリ秒)です。	autoplay: 2000
loop	最後までスライドしたら次のスライドは、最初のアイテムに戻ります。	loop: true
freeMode	通常は指定された個数ずつスライドしますが、これを設定すると、フレキシブルに移動します。主にスマホデバイス用の指で『シュッシュッ』と動かす際に便利です。	freeMode: true
spaceBetween	スライドアイテムの間に指定ピクセル分の余白を作ります。	spaceBetween: 30
slidesPerView	スライドアイテムを何個表示させるかを設定します。	slidesPerView: 3
slidesPerGroup	一度のスライド操作で何個分スライドさせるかを設定出来ます。	slidesPerGroup: 3
preventClicks	スライド中のクリック動作を制御します。初期値は無効になっています。 Chrome等でリンクが移動しない！という時はこれをfalseにすると幸せになれるかもしれません。	slidesPerGroup: 3
effect	スライド時の効果を変更します。 slide = スライドします。（初期値） fade = フェードします。 cube = キューブを回すような感じでスライドします。 coverflow = 立体的に画像が配置されてスライドされます。 flip = クルッとカードをひっくり返すような感じでスライドします。エフェクトに関してはデモページで詳しく紹介されていますので是非見て見てください！	effect: slide

モール型ECで使用する際の注意

楽天市場や、Yahooショッピング等でインラインフレームを通して表示してスマホで見る場合、上手く表示されません。

要するに『スマホ商品ページから”PC表示で見る”』ですね。
ほんとに今のご時世なんだから、PC表示で見なくても十分な情報を載せれるような仕様に早く変更してもらいたいものですね！

詳しく検証したわけではないので原因は不明ですが、上記環境で表示するとインラインフレーム内の『overflow: hidden;』が適用されず、横幅がすごいことになります。
結果、見た目普通なんですが、右余白が恐ろしいほどの幅になり、見る分には面白い表示になります。

これを解消するには、インラインフレーム内にスマートデバイスからの表示は横幅を960pxで固定するといった方法を取ると丁度よく収まります。
今回はクロージャで実装します。

Vanilla JS

[js]
(function(ua, e)
{
  // 要素が無い場合は処理しない。
  if (!ua || !e) return;

  // 指定したデバイスの場合のみ、横幅を設定する。
  if (/(ipod|iphone|ipad|android)/.test(ua)) e.style.width = '960px';
})(navigator.userAgent.toLowerCase(), document.querySelector('.swiper-container'));
[/js]

jQuery

[js]
(function(ua, e)
{
  // 要素が無い場合は処理しない。
  if (!ua || !e) return;

  // 指定したデバイスの場合のみ、横幅を設定する。
  if (/(ipod|iphone|ipad|android)/.test(ua)) e.css('width', '960px');
})(navigator.userAgent.toLowerCase(), $('.swiper-container'));
[/js]

これで横にびょ～んと伸びたような感じになるのを回避出来ます。