レスポンシブデザインでも使えるカルーセル slick.jsの使い方

レスポンシブデザインでカルーセルを簡単に実装できるjQueryプラグインの「slick.js」の使い方を紹介します。
公式サイトからファイルをダウンロードします。
ダウンロードしたファイルで必要なファイルを読み込みます、動かすのに必要なjQueryは予め読みこんどいてくださいね。

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slick.css">
<script src="jquery.min.js"></script>
<script src="js/slick.min.js" type="text/javascript"></script

htmlの記述です、下の例ではulの中noliにスライドする中身を入れていますが全てdivでも問題ありません。
スライドを無いようするクラス名はslide_areaとしていますがこの名前は任意でOKです。

<ul class="slide">
  <li><p>スライドの要素を入れる</p></li>
  <li><p>スライドの要素を入れる</p></li>
  <li><p>スライドの要素を入れる</p></li>
  <li><p>スライドの要素を入れる</p></li>
</ul>

あとはhtmlにあわせてjsを記述していきます。先ほどスライド内容を内包した要素のクラス名を設定します。

$('.slide').slick();

基本的なスライダーはこれで使えるようになります。
slick.jsはオプションが豊富でかなり細かくカスタマイズすることが出来ます。

スライドの始まる前と後で独自の処理をさせる

スライドhが始まるタイミングと後で何かしらの処理を入れる事ができます。
例えばスライドの上にフェードインで文字を表示させるなど使いみちはいろいろあります。

//スライドが切り替わった後に実行
$('.slide').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log('before');
});
//スライドが切り替わった後に実行
$('.slide').on('afterChange', function(event, slick, currentSlide, nextSlide){
  console.log('after');
});

slick.jsのオプション

オプション名 デフォルト 説明
accessibility bool true 左右ナビゲーションボタン
autoplay bool false オートプレイ
autoplaySpeed int 3000 スライドの表示時間
cssEase string ‘ease’ CSS3でのアニメーション
(ease,linear,ease-in,ease-out,ease-in-out)
dots bool false サムネイルのドット表示
dotsClass string ‘slick-dots’ ドット表示のクラス名
draggable bool true スライドのドラッグ
easing string ‘linear’ jQueryのアニメーションイージング
fade bool false フェードイン
arrows bool true 「次へ」「前へ」のナビゲーション
appendArrows string $(element) 「次へ」「前へ」を追加
appendDots string $(element) カレント表示ナビをカスタムで追加
prevArrow html html buttonタグ 「前へ」ボタンを変変更
nextArrow html html buttonタグ 「次へ」ボタンを変変更
infinite bool true スライドのループ
initialSlide int 0 最初のスライド位置
lazyLoad string ‘ondemand’ 画像の遅延ロード
onBeforeChange(this, currentIndex,targetIndex) method null スライド実行前にする処理を記述
onAfterChange(this, index) method null スライド実行後にする処理を記述
onInit(this) method null スライド初期化時にする処理を記述
onReInit(this) method null スライド初期化後にする処理を記述
pauseOnHover bool true スライドホバー時に再生をストップ
responsive obj null レスポンシブ表示のブレークポイント
slide string div スライドする要素が入っているクラス名
slidesToShow int 1 スライドを表示する数
slidesToScroll int 1 スライドする数
speed int 300 スライドアニメーションにかかる時間(ms)
swipe bool true タッチスワイプの有効/無効
swipeToSlide bool false スライドする数に関係なくスワイプの有効/無効
touchMove bool true タッチでスライドの有効/無効
useCSS bool true CSS Transitionsの有効/無効
vertical bool false 縦方向のスライドの有効/無効
rtl bool false 右から左へスライド方向の変更の有効/無効