slick
オプション一覧
よく使うオプション
| オプション名 | 用途 | 値（赤字は初期値） |
|---|---|---|
| autoplay | 自動再生 | true：自動再生をON false：自動再生をOFF |
| autoplaySpeed | 自動再生の速度 （ミリ秒設定：1000ミリ秒=1秒） |
3000 |
| speed | 切替の速度 （ミリ秒設定：1000ミリ秒=1秒） |
300 |
| arrows | スライダーの左右に矢印（「次へ」「前へ」ボタン）を表示 | true： 表示 false：非表示 |
| prevArrow | 前矢印のHTMLをカスタマイズ | <button type=”button” class=”slick-prev”>Previous</button> |
| nextArrow | 次矢印のHTMLをカスタマイズ | <button type=”button” class=”slick-next”>Next<button> |
| centerMode | 中央にスライドを配置して前後のスライドの一部を表示 | true： 中央にスライドをフォーカス表示 false：通常表示 |
| centerPadding | 「centerMode」有効時に左右に見える幅 | %またはpxで幅を指定 |
| dots | ドットインジゲーター | true： 表示 false：非表示 |
| dotsClass | ドットインジゲーターのクラス名変更 | slick-dots 例「dotsClass: 'original-dots'」任意のclass名に変更ができる |
| fade | フェード切り替え |
true：フェードイン・アウトで切り替え false：横方向にスライドで切り替え |
| adaptiveHeight | スライダーの高さを現在のスライドに合わせる |
true： false：無効 |
| infinite | ループ再生 | true：無限にスライドがループ false：最後のスライドで停止 |
| pauseOnFocus | スライダーがフォーカスされたときに自動再生を一時停止する | true：一時停止する false： |
| pauseOnHover | スライダーにカーソルが乗ったときに自動再生を一時停止する | true：一時停止する false： |
| pauseOnDotsHover | ページネーションドットにカーソルが乗ったときに自動再生を一時停止する | false： true：一時停止する |
| responsive | レスポンシブ設定をカスタマイズするためのオブジェクト | null |
| vertical | 垂直方向へのスライドを有効にする | false |
| verticalSwiping | 垂直方向へのスワイプを有効にする | false |
| rtl | ライトから左にスライドする（アラビア語などのRTL言語用） | false |
| slidesToShow | 表示するスライドの枚数を指定 | 表示させるスライドの枚数を整数で指定 （例：1 → スライドを1枚表示） |
| slidesToScroll | 一度にスクロールするスライドの枚数を指定 | スクロールさせるスライドの枚数を整数で指定 （例：2 → 一度にスライドを2枚スクロール） |
たまに使うオプション
| オプション名 | 用途 | 値（赤字は初期値） |
|---|---|---|
| accessibility | タブもしくは矢印でスライド切替 | true： false： |
| appendArrows | 矢印の生成場所をカスタマイズ | $(element) |
| appendDots | ドットインジゲーターの生成場所をカスタマイズ | $(element) |
| customPaging | ドットインジゲーターをカスタマイズ | |
| draggable | スライドをマウスドラッグで切り替えるか否か | true： false： |
| focusOnSelect | クリックしたスライド要素に動かすか否か | true： false： |
| easing | animate()のイージングを指定 | linear |
| edgeFriction | スライドをスワイプ時の抵抗値（ループ無効時） | 0.15 |
| initialSlide | 最初に表示するスライドの指定 | 0 |
| lazyLoad | 画像の遅延読み込み ・ondemand ⇒ スライド時に画像読み込む ・progressive ⇒ ページ読込時に画像読み込む |
ondemand |
| mobileFirst | レスポンシブ対応時に最も幅が狭い設定を表示 | false |
| respondTo | レスポンシブ対応の判断基準 ・window ⇒ ウインドウの横幅 ・slider ⇒ スライド部分の横幅 ・min ⇒ windowとsliderの小さい方 |
window |
| rows | スライドの行数 | 1 |
| slide | スライドする要素を設定 | ” |
| slidesPerRow | スライドの表示数（１行あたり） | 1（rowsの値が2以上の時） |
| swipe | スワイプを有効にするか否か | true |
| touchMove | タッチでのスライドを有効にするか否か | true |
| touchThreshold | スワイプでスライドする時の有効距離 | 5（スライド幅の1/5以上スワイプ） |
| useCSS | transitionを有効にするか否か | true |
| useTransform | スライド幅の自動計算を有効にするか否か | false |
| waitForAnimate | アニメーション中のスライド移動を有効にするか否か | true |
| zIndex | スライドのz-indexを設定 | 1000 |