【保存版】画像スライダー「Slick.js」の頻出オプション一覧

<!-- クラス名は任意 -->
<ul class="slick-slider">
  <li><img src="画像1"></li>
  <li><img src="画像2"></li>
  <li><img src="画像3"></li>
  <li><img src="画像4"></li>
  <li><img src="画像5"></li>
</ul>

$('.slick-slider').slick({
  /* ここにオプションを追加していきます！ */
});

/* 矢印をオフにする */
$('.slick-slider').slick({
  arrows: false,
});

/* 矢印に任意のクラスや要素を追加する */
$('.slick-slider').slick({
  prevArrow: '<button type="button" class="prev-button"><img src="画像URL"></button>',
  nextArrow: '<button type="button" class="next-button"><img src="画像URL"></button>',
});

/* ナビゲーション用ドットをオンにする */
$('.slick-slider').slick({
  dots: true
});

/* 前後のスライドを100px見切れて表示させる */
$('.slick-slider').slick({
  centerMode: true,
  centerPadding: '100px'
});

/*.スライドを3枚表示させ、1クリックで3枚スライドさせる */
$('.slick-slide').slick({
  slidesToShow: 3,
  slidesToScroll: 3 
});

/* 自動再生をONにし、5000ミリ秒でスライド（デフォルトより少し遅くする） */
$('.slick-slider').slick({
  autoplay: true,
  autoplaySpeed: 5000
});

/* スライド切り替えをフェードに変更し、切り替えスピードをデフォルトより遅くする（500ミリ秒） */
$('.slick-slide').slick({
  fade: true,
  speed: 500
});

$('.slick-slider').slick({

  /* 通常オプション（共通設定など） */

  /* レスポンシブ設定 */
  responsive: [
    // 1100px以下
    {
      breakpoint: 1100,
      settings: {
        /* 1000px以下の設定 */
      }
    },
    // 798px以下
    {
      breakpoint: 798,
      settings: {
        /* 798px以下の設定 */
      }
    },
    // 300px以下
    {
      breakpoint: 300,
      settings: {
        /* 300px以下の設定 */
      }
    },
  ]
});

/* PCではスライド3枚表示、タブレット・スマホでは1枚表示 */
$('.slick-slider').slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 798,
      settings: {
        slidesToShow: 1,
      }
    }
  ]
});