レスポンシブ対応のjQueryカルーセル 「slick」

レスポンシブ対応のjQueryカルーセル 「slick」

レスポンシブ対応で、フリックも使えるjQueryプラグイン「slick」の紹介です。

カルーセルを実装するときに使うこと多めなプラグインです。
とても使いやすいのでPCでもスマートフォンでも、基本的にはこれで対応できると思います。

特徴とか

設置が楽だ

まずダウンロード

こちらから

使うファイル

中にある
「slick.css」
「slick.min.js」
を使います。

デフォルトのデザインを使用する場合には中の
「fonts」
「slick-theme.css」
も必要です。

ちなみにもう一つ入っている「slick.js」は中身は同じです。
「slick」はプラグインの中からデフォルトの設定やボタンのテンプレート等のオプションを編集することができるので、もしよく使う設定があった場合は「slick.js」内を編集して再度圧縮して使用した方が便利かもしれません。

もし圧縮したかったら

packer

もし展開したかったら

JS Beautifier

 

こういったJavaScriptやHTMLの圧縮、展開サービスは他にもあります。

設置する

フォルダ内は下記の設定で進めます。
必要に応じてパスは変えてください。

— fonts(デフォルトのデザインを使用する場合)
— js
— css
— images
— index.html

ファイルの読み込み

<link rel="stylesheet" href="css/slick.css">
<script src="js/jquery-2.1.1.js"></script>
<script src="js/slick.min.js"></script>

「slick」はjQueryの読み込みがないと動きません。
推奨はver1.7以上のようです。
公式サイトではbodyタグの直前に「slick.min.js」を読み込むように書いていますが、head内でもbody直前でもどちらでも良いと思います。

要素をHTMLで記述

<ul class="slider">
  <li>要素1</li>
  <li>要素2</li>
  <li>要素3</li>
  <li>要素4</li>
  <li>要素5</li>
  <li>要素6</li>
  <li>要素7</li>
  <li>要素8</li>
</ul>

slickを使用するための記述

<script>
  $(function(){
    $('.slider').slick();
  });
</script>

これだけで、動くようになると思います。
親要素の対して幅100%のカルーセルになります
オプションはプラグイン内のデフォルトの設定が適用されます。

オプションが豊富でわかりやすい

「slick」には用意されているオプションが豊富にあります。
そしてオプション名もわかりやすいです。
主観ですが「これを設定したらこうなる」
というのがオプション名からイメージしやすいのではないかと思います。

よく使うオプション

オプションの記述は先ほどの「slickを使用するための記述」内に箇条書きしていくような感じです。
一応書きますが、「true」が yes で、「false」は no という意味です。

<script>
  $(function(){
    $('.slider').slick({
      slidesToShow: 1, //画面上に何個表示させるか
      slidesToScroll: 1, //何個ずつスクロールさせるか
      autoplay: true, //自動再生させるか
      autoplaySpeed: 4000, //自動再生の間隔
      dots:  false, //下のドットは表示させるか
      arrows:  true, //左右のナビゲーションは表示させるか
      infinite: true, //ループさせるかどうか
      centerMode: true, //表示中のスライドをセンターに配置するか
      responsive: [ //レスポンシブの設定
      {
        breakpoint: 1024, //ブレークポイント1の値
          settings: { //ブレークポイント1のオプション
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
      },
      {
        breakpoint: 600, //ブレークポイント2の値
          settings: { //ブレークポイント2のオプション
            slidesToShow: 2,
            slidesToScroll: 2
          }
      },
      {
        breakpoint: 400, //ブレークポイント2の値
          settings: "unslick" //slickを使わない
      }]
    });
  });
</script>

公式サイトが見やすい

「slick」は公式サイトがかなり見やすいです。
これはプラグインを使う上で結構大事なことかと思います。
中にあるデモも豊富で、下にあるソースコードをコピーすればもちろんその通りに動くので、イメージしやすいですね。
フィルターのかけ方も書いてあり、カルーセル以外にも使い方ができそうな気がします。

公式サイト

「詳しくは公式ページから見れます」と書いてあって、いざ公式ページに行ってみたら全然わからなかった。
ということが「slick」は無いと思います。かなり導入しやすいです。

カスタマイズするには

多いのはドットと左右のナビゲーションをカスタマイズすることだと思います。

割と楽な方法は「slick-theme.css」の中の

.slick-prev:before
.slick-next:before
.slick-dots li button:before
.slick-dots li.slick-active button:before
この辺りの疑似要素を変更してCSSに追加してあげるといいと思います。

 

「slick」には他にメソッドも用意されているので、JavaScriptを使って色々と応用が効きそうです。