レスポンシブ対応のjQueryカルーセル 「slick」
レスポンシブ対応で、フリックも使えるjQueryプラグイン「slick」の紹介です。
カルーセルを実装するときに使うこと多めなプラグインです。
とても使いやすいのでPCでもスマートフォンでも、基本的にはこれで対応できると思います。
特徴とか
設置が楽だ
まずダウンロード
使うファイル
中にある
「slick.css」
「slick.min.js」
を使います。
デフォルトのデザインを使用する場合には中の
「fonts」
「slick-theme.css」
も必要です。
ちなみにもう一つ入っている「slick.js」は中身は同じです。
「slick」はプラグインの中からデフォルトの設定やボタンのテンプレート等のオプションを編集することができるので、もしよく使う設定があった場合は「slick.js」内を編集して再度圧縮して使用した方が便利かもしれません。
もし圧縮したかったら
もし展開したかったら
こういった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
「slick」には他にメソッドも用意されているので、JavaScriptを使って色々と応用が効きそうです。