レスポンシブなスライドショーを実装するjQueryプラグイン3種

レスポンシブサイトでスライドショーを実装する時に、いくつかのjQueryプラグインを試したので、そのまとめ。

Glide.js

一番最初に使用したプラグイン「Glide.js」。

ダウンロードページ

Glide.js | Simple, responsive and fast jquery carousel slider
http://glide.jedrzejchalubek.com/

上記にアクセスし、右上の「Download」をクリックするとダウンロードできる。

使い方

1. ダウンロードファイルを解凍し「dist」フォルダ以下にある「glide.min.js」「css/glide.core.min.css」「css/glide.theme.min.css」の3ファイルをコピーし、HTMLファイルに読み込ませる。

2. HTMLファイルに、以下ようなコードを記載する。

   <div id="Glide" class="glide">
       <div class="glide__wrapper">
           <ul class="glide__track">
               <li class="glide__slide"><img src="1.jpg"></li>
               <li class="glide__slide"><img src="2.jpg"></li>
               <li class="glide__slide"><img src="3.jpg"></li>
           </ul>
       </div>
   </div>

   最上位のid名称は自由に設定できる。以降のclass名称はデフォルトでは固定名称なので、変更不可。

3. 次に、HTMLファイルまたは外部のjsファイルに以下のコードを記載する。

   $("#Glide").glide();

   #Glideは上記の最上位のid名称を記載する。

コメント

デフォルトでHTMLファイル側に指定するクラス名が決まっているのが、個人的にはちょっとイヤ。
なるべくHTMLファイルには意味のある記述のみにしたいので。

あと一番困ったのが、スマホやタブレットで表示した時、初期表示の画像サイズが縮小されずに最大表示される事態に陥った。
元のCSSの設定内容との相性だと思うが、いろいろ触っても解消されなかったので、別のプラグインを探すことに。

Flickity.js

Glide.jsコメント欄に記載の通り、別のプラグインを探して次に見つけたプラグインがこちら。

ダウンロードページ

Flickity
http://flickity.metafizzy.co/

上記ページの「Download flickity.css」「Download flickity.pkgd.min.js」をそれぞれクリックしてファイルをダウンロードする。

使い方

基本的な使い方はGlide.jsと同じ。
読み込むファイル数はcssファイル1個とjsファイル1個の2個だけなので、Glide.jsよりちょっとシンプル。

HTMLファイルの記述方法は以下の通り。

<ul class="js-flickity">
<li class="gallery-cell"></li>
<li class="gallery-cell"><img src="1.jpg"></li>
<li class="gallery-cell"><img src="2.jpg"></li>
</ul>

ulのclass名が「js-flickity」で良ければ、これだけで使用可能。追加のjQueryコードは不要。

ulのclass名を変えたい場合は、以下の通りjQueryコードを記載すればOK。

$('#flickity').flickity();

#flickityの部分を任意のセレクタ名にすれば、ulのセレクタは自由に設定可能。

コメント

導入がシンプルで使い方は一番好みだけど、実装しようとしていたサイトだとGlide.jsと同様に初期表示の画像サイズが最大表示されてしまった。
スクロールなど、操作すれば画面幅で縮小されるんだけどなぁ。
原因追及する時間もないので、別のプラグインをさらに探すことに。

Slick.js

最後に試して結局採用したのがこれ。「Slick.js」。

使い勝手とかも上記2個と変わらない感じで、かつ、初期表示での画像最大表示問題が起こらない！！

ダウンロードページ

slick – the last carousel you’ll ever need
http://kenwheeler.github.io/slick/

上記から「get it now」をクリックして「Download Now」をクリックすると保存できる。

使い方

ダウンロードしたファイルを解凍して、「slick」フォルダ以下にある「slick.min.js」「slick.css」「slick-theme.css」の3ファイルをコピーして、HTMLファイルに読み込ませる。

HTMLファイルに以下のコードを記載する。

<div class="slider">
    <div><img src="1.jpg"></div>
    <div><img src="2.jpg"></div>
    <div><img src="3.jpg"></div>
</div>

親となるタグ、セレクタは自由に設定できるが、スライドさせる画像は<div>タグで囲う必要がある。

次に、以下のjQueryコードをHTMLファイルまたは外部ファイルに追記する。

$('.slider').slick();

セレクタは自由に設定可能。

コメント

スライド対象を<div>タグで囲うのがちょっとマイナスポイントだけど、初期表示の画像サイズ最大問題が起こらなかったので、即採用。