📚 目次（Table of Contents）

Slick カルーセル完全ガイド【オプション・イベント・メソッド一覧】

Slick公式サイトを参考に、Slickスライダーの基本オプション、イベント、メソッドを日本語で整理しました。導入時や調整時にコピペですぐ使えるよう、実例コードも掲載しています。

responsive 配列で画面幅ごとに設定を切り替えられます。

responsive: [
  {
    breakpoint: 768,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 1
    }
  }
]

オプション名	デフォルト値	説明
initialSlide	0	最初に表示するスライドのインデックス
centerMode	false	中央スライドを中央寄せで強調
centerPadding	50px	centerMode 時の左右余白
focusOnSelect	false	スライドクリックでアクティブ化
lazyLoad	ondemand	遅延読み込み（ondemand または progressive）
variableWidth	false	スライド幅を自動に（不揃いサイズ可）

Slickのライフサイクルやユーザー操作に応じてコールバックを設定できます。

$('.your-class').on('afterChange', function(event, slick, currentSlide){
    console.log('現在のスライド:', currentSlide);
});

Slickインスタンスに動的操作ができます。

メソッド名	説明
slickGoTo(index)	指定のスライドへ移動
slickNext()	次のスライドへ
slickPrev()	前のスライドへ
slickPause()	自動再生を停止
slickPlay()	自動再生を再開
slickAdd(element, index, addBefore)	スライドを追加
slickRemove(index, removeBefore)	スライドを削除
slickFilter(selector)	対象スライドだけ表示
slickUnfilter()	フィルタ解除
slickSetOption(option, value, refresh)	オプションの動的変更
unslick()	スライダーを破棄して元に戻す

初期化：

$('.slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1
});

イベント：

$('.slider').on('afterChange', function(event, slick, currentSlide){
    console.log('現在のスライド:', currentSlide);
});

メソッド操作：

$('.slider').slick('slickGoTo', 2);
$('.slider').slick('slickPause');
$('.slider').slick('slickAdd', '<div>New</div>');

Slickはシンプルなカルーセルから、高度なレスポンシブスライダーまで幅広く対応できます。この記事が導入や実装の一助になれば幸いです。

（このまとめは Slick公式ドキュメントをベースに、日本語で再構成したものです）