パソ君
・slickのオプションって何がある？
こんな疑問にお答えします。
slickを使えば簡単にスライダーを実装できます。
さらにオプションを活用すれば、様々なカスタマイズが可能です。
ただ多すぎて覚えるのが難しい。。
ジト
かなりあるよ！
ということで、この記事では「slickのオプション」についてまとめてみました！
この記事でわかること
slickのオプション一覧
【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】 目次
【解説】slickのオプション一覧【カスタマイズまとめ】
slickには様々なオプションが存在します。
今回一覧でまとめてみました！
| 名前 | 仕様 | 初期値 |
|---|---|---|
| autoplay | 自動再生するか否か | false |
| autoplaySpeed | 自動再生の速度 | 3000ミリ秒 |
| speed | 切替の速度 | 300ミリ秒 |
| arrows | 矢印を表示するか否か | true |
| asNavFor | 他スライダーと同期 | null |
| prevArrow | 前矢印のHTMLをカスタマイズ | <button type=”button” class=”slick-prev”> Previous </button> |
| nextArrow | 次矢印のHTMLをカスタマイズ | <button type=”button” class=”slick-next”> Next </button> |
| centerMode | センターモードにするか否か | false |
| centerPadding | centerMode有効時に 左右に見える幅 | 50px（centerMode有効時） |
| dots | ドットインジゲーターを表示するか否か | false |
| dotsClass | ドットインジゲーターのクラス名変更 | slick-dots |
| fade | 切替をフェードにするか否か | false |
| adaptiveHeight | スライド要素の高さを調整するか否か | false |
| infinite | スライドを無限ループするか否か | true |
| pauseOnFocus | 一時停止するか否か（フォーカス時） | true（autoplay:trueの場合） |
| pauseOnHover | 一時停止するか否か（ホバー時） | true（autoplay:trueの場合） |
| pauseOnDotsHover | 一時停止するか否か （ドットインジゲーターをホバー時） | true（autoplay:trueの場合） |
| responsive | レスポンシブ対応のオプション設定 | |
| vertical | スライドを縦方向にするか否か | false |
| verticalSwiping | スライドを縦方向にするか否か（スワイプ時） | false |
| rtl | スライドの方向を逆にするか否か | false |
| slidesToShow | スライドの表示数 | 1 |
| slidesToScroll | スライドが一度に動く数 | 1 |
| 名前 | 仕様 | 初期値 |
|---|---|---|
| accessibility | タブもしくは矢印でスライド切替 | true |
| appendArrows | 矢印の生成場所をカスタマイズ | $(element) |
| appendDots | ドットインジゲーターの生成場所を カスタマイズ | $(element) |
| customPaging | ドットインジゲーターをカスタマイズ | |
| draggable | スライドをマウスドラッグで切り替えるか否か | true |
| focusOnSelect | クリックしたスライド要素に動かすか否か | 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 |
| swipeToSlide | スワイプでスライドできるか否か （slidesToScrollに関係なく） | false |
| touchMove | タッチでのスライドを有効にするか否か | true |
| touchThreshold | スワイプでスライドする時の有効距離 | 5 （スライド幅の1/5以上スワイプ） |
| useCSS | transitionを有効にするか否か | true |
| useTransform | transformを有効にするか否か | true |
| variableWidth | スライド幅の自動計算を有効にするか否か | false |
| waitForAnimate | アニメーション中のスライド移動を 有効にするか否か | true |
| zIndex | スライドのz-indexを設定 | 1000 |
【解説】slickで無限ループスライダーの作成方法【逆方向あり】 
【簡単】slickのセンターモードのやり方【左右チラ見せ】 
【解説】slickで左右の画像を「透過・小さく」させる方法 
【slick】2つのスライダーを連動させる方法【サムネイル付き】 
【簡単】slickを縦方向にスライドさせる方法【コピペOK】 
【解説】slickでズーム＋フェード切り替えする方法【コピペOK】 
【簡単】slickで背景画像を使ったスライドショー【全画面表示】 
【簡単】slickのレスポンシブ対応方法【ブレイクポイント】 
【解決】slickのスライダーをスマホのみ無効にする【コピペOK】 
【簡単】slickの矢印カスタマイズ方法【前へ・次へ】 
【slick】ドットのカスタマイズ方法【画像／プログレスバー】 【解説】slickのオプション一覧【カスタマイズまとめ】：まとめ
- slickには様々なオプションがある
- オプションを使いこなせばカスタマイズ可能
ジト
slickのオプションを使う場合は参考にしてみてね！
【最新】slickのスライダー実装サンプル25選【コピペOK】