(cache) レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

運動不足が気になりだしたらこのお茶

slickは、レスポンシブ対応のカルーセル/スライダーを実装することができるjQueryプラグインです。非常に豊富なオプションも用意されています。

今回は、このslickの実装手順を紹介したいと思います。そんなに難しくないので、ぜひチャレンジしてみてください。

ステップ1. ファイルのダウンロードと設置

slickの公式サイトにアクセスし、「get it now」からファイル一式をダウンロードします。

zipファイルを解凍したら、以下のフォルダとファイルをサーバー上にアップロードします。

fontsフォルダ
slick.css
slick-theme.css
slick.min.js

fontsフォルダとslick-theme.cssは同階層に設置してください。

ステップ2. HTMLのマークアップ

<head>～</head>内で、以下のようにアップしたcssファイルをロードします。

<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">

続いて、</body>の直前で、以下のようにjQueryとslick本体をロードします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

スライドを表示する部分は、以下のように画像をリストで記述します。

<ul class="slide">
 <li><img src="images/slide/slide1.png"></li>
 <li><img src="images/slide/slide2.png"></li>
 <li><img src="images/slide/slide3.png"></li>
 <li><img src="images/slide/slide4.png"></li>
 <li><img src="images/slide/slide5.png"></li>
</ul>

ステップ3. slickの実行

最後に、</body>の直前に以下を追加して、slickを実行します。

<script>
$(function(){
 $('.slide').slick({
 autoplay:true,
 autoplaySpeed:5000,
 dots:true,
 pauseOnHover:true
 });
});
</script>

「.slide」の部分は、画像を包括しているulに付与したクラスと合わせます。

オプション

代表的なオプションについては、以下の通りです。

autoplay	自動再生
autoplaySpeed	自動再生の間隔
arrows	ナビゲーション(矢印)の表示
dots	スライド数を示すドットの表示
fade	フェードイン・フェードアウトの切り替え効果
infinite	ループの有無
pauseOnHover	マウスホバーで自動再生を一時停止
pauseOnDotsHover	ドットにマウスホバーで自動再生を一時停止