スライダープラグイン「Slick」便利なオプション&動きサンプル集

Slickの便利なオプションと動きサンプルを分かりやすくまとめています。
オプションやサンプルは今後もどんどん追加していきます。

1. よく使うオプション

数多く用意されているSlickのオプションの中でも、知っておくと便利な定番オプション。

1-1. 表示に関するオプション

項目	デフォルト	仕様
arrows	true	左右矢印を表示する
dots	false	ドット（ページ送り）を表示する
slidesToShow	1	スライダーの表示数
slidesToScroll	1	一度にスライドする数
adaptiveHeight	false	trueの場合、高さ可変。faleseの場合、高さ固定。
centerMode	false	センターモード（＝両端見切れ状態）になる【2-4.参照】
centerPadding	'50px'	センターモード時、見切れたコンテンツの幅をpx指定できる
asNavFor	null	スライダーを他のスラーダーのナビゲーションとして連携する【2-5.参照】
lazyLoad	ondemand	画像読み込みのタイミングを設定する。（※注1） ・ondemand：画像をスライドさせると画像を読み込む。 ・progressive：ページが読み込まれた後に非表示の画像を読み込む。

（※注1）lazyLoadを利用したい画像はdata-lazyで記述する。

<img data-lazy="sample.jpg" alt="サンプル" />

1-2. 動きに関するオプション

項目	デフォルト	仕様
infinite	true	無限にスライドする
fade	false	trueの場合、スライド切り替え時にフェードインアウトする （*誤ってvertical:trueと使用するとうまく機能しません）
speed	300	フェードのスピード
autoplay	false	trueの場合、自動再生する
autoplaySpeed	3000	自動再生時のスライド切り替えのスピード
vertical	false	縦方向にスライドする【2-2.参照】

1-3. ユーザーの操作に関するオプション

項目	デフォルト	仕様
accessibility	true	タブまたは矢印でスライド切り替えができる
swipe	true	スワイプできる
verticalSwiping	false	垂直方向にスワイプできる【2-2.参照】
focusOnSelect	false	trueの場合、コンテンツをタッチすると中央にフォーカス（=移動)する。中央のコンテンツをタッチしても動きはない。【2-4.参照】
pauseOnHover	true	マウスオーバー中は、スライドを停止する
pauseOnFocus	true	スライダをフォーカス（ドットのクリック）した時に自動再生を一時停止する

1-4. カスタマイズのためのオプション

項目	デフォルト	仕様
prevArrow	<button type="button" class="slick-prev">Previous</button>	前矢印のHTMLカスタマイズ
nextArrow	<button type="button" class="slick-next">Next</button>	後矢印のHTMLカスタマイズ

1-5. レスポンシブ

項目	デフォルト	仕様
responsive		画面幅でオプションの設定を変更できる
breakpoint		画面幅の指定（指定px以下に適応する）
settings		この中に変更したいオプションを設定する

$('.slick-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    },
    {
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

2. 定番のスライドサンプル集

サイトでよく見るスライドのサンプルをまとめています。

2-1. 一面横スライド

【DEMO1】

  $('.slider-1').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    dots: true,
    arrows: false,
  });

2-2. ニュースティッカー

トップページで新着情報やお知らせ等が１行で流れてくる動き。
【DEMO2】

  $('.slider-2').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    fade: false,
    speed: 1000,
    arrows: false,
    vertical: true,
    verticalSwiping: true,
    slidesToShow: 1,
    slidesToScroll: 1,
  });

*verticalのtrue設定で、垂直スライドになる。
*verticalSwipingのtrue設定で、垂直方向にスワイプが可能。verticalでは、swipeでスワイプできない。

2-3. 複数コンテンツの同時横スライド

【DEMO3】

  $('.slider-3').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 1,
  });

上の設定は、常に3コンテンツが表示され、１つずつ横スライドする。一度にスライドするコンテンツの数は、slidesToScrollで設定。

2-4. 両端が見切れる（=センターモード）スライド

【DEMO4】

  $('.slider-4').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    arrows: true,
    slidesToShow: 1,
    centerMode: true,
    centerPadding: '100px',
    focusOnSelect: true,
  });

*centerModeのtrue設定で、センターモード（両端見切れ状態）になる。その際のslidesToShowは、見切れずに表示されるコンテンツ数。
*centerPaddingで見切れるコンテンツの幅をpx指定。（デフォルト：50px）
*focusOnSelectど真ん中のコンテンツ以外をクリックすると、ど真ん中まで移動（＝フォーカス）する。センターモードにする際は、セットで設定しておくとユーザーフレンドリーかも。

*センターのコンテンツを目立たせたい場合は、.slick-centerが付与されているのでCSS調整可能。

2-5. スライドの連携

【DEMO5】

  $('.slider-5-thum').slick({
    arrows:false,
    asNavFor:'.slider-5-nav',
  });
  $('.slider-5-nav').slick({
    asNavFor:'.slider-5-thum',
    focusOnSelect: true,
    slidesToShow:3,
    slidesToScroll:1,
    centerMode: true,
  });

asNavForで、連携したいスライドのclassもしくはidをそれぞれ記載する。

2-6. 画像ナビゲーション

画像ナビをクリックすると、メインの画像が切り替わるスライダー。
「2-5.スライド連携」のスライダーは画像ナビの表示件数が固定であるのに対し、本スライダーは件数の変化に対応できる。
.slick-dotsのドットを画像に置き換えて、画像ナビゲーションを作成。

  $('.slider').slick({
    lazyLoad: 'progressive', //LazyLoad使う場合
    dots:true,
    customPaging: function(slick,index) {
      // スライダーのインデックス番号に対応した画像のsrcを取得
      var targetImage = slick.$slides.eq(index).find('img').attr('data-lazy');
      // slick-dots > li　の中に上記で取得した画像を設定
      return '<img data-lazy=" ' + targetImage + ' "/>';
    }
  });

*LazyLoadを使う場合は、"progressive"を設定。（でないと画像ナビが表示されない）

参考にしたサイト：イメージナビゲーションとスライダーの作成方法

3. 解決事例集

ユーザーがドットをクリック（＝フォーカス）操作すると、自動再生が停止してしまう。

=> pauseOnFocus: falseを設定すると、フォーカスしても自動再生が再開する。

ロード時に一瞬縦並びになる

スライダーが初期化（読み込み完了）した時点で付与されるクラス.slick-initializedを利用し、CSSで調整可能。

.slider_sample {
  opacity: 0;
  transition: opacity .3s linear;
}
.slider_sample.slick-initialized{
  opacity: 1;
}

参考にしたサイト：【slick】ロード時に一瞬縦並びになるのをCSSで解決する

slidesToShowよりコンテンツ数が少ない場合や同じ数の場合バグが起こり表示がおかしくなる。

以下の１）or ２）設定をすることで回避可能。

１）slidesToShowの設定数 = コンテンツ数の場合（ナビゲーションをスライドさせず固定したい場合）
「slidesToShow」「slidesToScroll」を同じ数にする。

２）slidesToShowの設定数 <= コンテンツ数の場合
以下のサイトを参考にさせていただきました。
　https://gakuya.work/slick-js-thumbnail-important-point/