📚 目次（Table of Contents）
Slick カルーセル完全ガイド【オプション・イベント・メソッド一覧】
Slick公式サイト を参考に、Slickスライダーの基本オプション、イベント、メソッドを日本語で整理しました。導入時や調整時にコピペですぐ使えるよう、実例コードも掲載しています。
基本オプション一覧
| オプション名 | デフォルト値 | 説明 |
|---|---|---|
| dots | false | ドットナビゲーションを表示する |
| infinite | true | スライドを無限ループさせる |
| speed | 300 | スライドアニメーションのスピード（ミリ秒） |
| slidesToShow | 1 | 一度に表示するスライド数 |
| slidesToScroll | 1 | スクロール時に移動するスライド数 |
| autoplay | false | 自動再生を有効にする |
| autoplaySpeed | 3000 | 自動再生の間隔（ミリ秒） |
| fade | false | 横移動ではなくフェードで切り替える |
| cssEase | ease | CSSのイージング（例：linear, ease-in） |
ナビゲーション設定
| オプション名 | デフォルト値 | 説明 |
|---|---|---|
| arrows | true | 左右の矢印を表示する |
| prevArrow / nextArrow | ボタンHTML | カスタム矢印のHTMLを指定可能 |
| dotsClass | slick-dots | ドットナビゲーションのクラス名 |
レスポンシブ設定（例）
responsive 配列で画面幅ごとに設定を切り替えられます。
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
スワイプ・スクロール関連
| オプション名 | デフォルト値 | 説明 |
|---|---|---|
| swipe | true | スワイプを有効にする |
| swipeToSlide | false | 任意スライド位置で止められる |
| touchMove | true | タッチ移動を許可 |
| draggable | true | マウスドラッグでスライド可能にする |
| vertical | false | 垂直方向にスライドする |
| verticalSwiping | false | 垂直スワイプを有効にする |
その他オプション
| オプション名 | デフォルト値 | 説明 |
|---|---|---|
| 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);
});
| イベント名 | タイミング |
|---|---|
| init | 初期化完了時（最初の1回） |
| beforeChange | スライド切り替え直前 |
| afterChange | スライド切り替え後 |
| edge | 最初または最後に到達時 |
| swipe | スワイプされたとき |
| lazyLoaded | 画像の遅延読み込み成功時 |
| lazyLoadError | 遅延読み込みエラー時 |
| breakpoint | ブレークポイント到達時 |
| destroy | unslick() 実行時 |
| reInit | 再初期化（unslick → 再構築）時 |
メソッド一覧
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公式ドキュメントをベースに、日本語で再構成したものです）