今回はそんな疑問にお答えします。
スライダーを簡単に実装できるプラグインとして有名なslickですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。
slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
-
レスポンシブ対応のスライダープラグイン slickの使い方
続きを見る
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
今回は使用頻度が低い物まで一覧としてご紹介していこうと思います。
（有料になっていたらすいません🙇♂️）
slickのカスタマイズ用オプションまとめ一覧
早速ですが一覧を表示します。
個人的に良く使う物は赤字で、特に良く使う物は太字にしています。
| オプション名 | 内容 | 初期値 |
| accessibility | タブと矢印キーのナビゲーション | true |
| adaptiveHeight | スライドの高さの自動調整 | false |
| autoplay | 自動再生 | false |
| autoplaySpeed | 自動再生速度 | 3000（ミリ秒） |
| arrows | 前・次の矢印表示 | true |
| asNavFor | スライダを他のスライダのナビゲーションに設定（class名かid名） | null |
| appendArrows | 前・次の矢印を生成する場所を変更 | $(element) |
| appendDots | ドットインジケーターを生成する場所を変更 | $(element) |
| prevArrow | 前矢印のカスタマイズ | <button type=”button” class=”slick-prev”>Previous</button> |
| nextArrow | 次矢印のカスタマイズ | <button type=”button” class=”slick-next”>Next</button> |
| centerMode | スライドを中心に表示して、部分的に前後のスライドが見えるように設定 | false |
| centerPadding | centerMode時に前後のスライドが見える幅（px or ％） | 50px（centerModeがtrueの時のみ） |
| cssEase | CSS3アニメーションのイージングを設定 | ease |
| dots | ドットインジケーターの表示 | false |
| customPaging | ドットインジケーターのカスタマイズ | なし |
| dotsClass | ドットインジケーターのclass名変更 | slick-dots |
| draggable | マウスドラッグでスライド切替え | true |
| fade | スライドの切替えをスライドからフェードに変更 | false |
| focusOnSelect | クリックした要素にスライド | false |
| easing | jQueryのイージング | linear |
| infinite | スライドの無限ループ | true |
| edgeFriction | 無限ループしない場合に端のスライドからさらに進もうとした場合のバウンド処理の動作秒数 | 0.15 |
| initialSlide | 最初のスライドを指定 | 0 |
| lazyLoad | 画像の遅延表示タイプ | ondemand（ondemandかprogressive） |
| mobileFirst | レスポンシブ設定の際に、最も幅が狭い設定を表示 | false |
| pauseOnFocus | フォーカスで一時停止 | true（autoplay:true時のみ） |
| pauseOnHover | マウスホバーで一時停止 | true（autoplay:true時のみ） |
| pauseOnDotsHover | ドットインジケーターをマウスホバーで一時停止 | true（autoplay:true時のみ） |
| respondTo | レスポンシブの判断基準 | window（’window’、’slider’、’min’の3種類） |
| responsive | レスポンシブのブレイクポイントを設定してオプションを切り替える | none |
| rows | 行数の指定 | 1 |
| slide | スライドとして使用する要素を設定 | ” |
| slidesPerRow | 1行あたりに表示させるスライド数 | 1（rowsの値が2以上のときのみ） |
| slidesToShow | 表示するスライド数 | 1 |
| slidesToScroll | １スクロールで動くスライド数 | 1 |
| speed | スライド、フェードアニメーションの速度 | 300（ミリ秒） |
| swipe | スワイプの設定 | true |
| swipeToSlide | slidesToScrollに関係なく、スワイプでスライド可能 | false |
| touchMove | タッチでスライド | true |
| touchThreshold | スライダーの横幅分マウスドラッグするとスライド | 5 |
| useCSS | CSSのtransition | true |
| useTransform | CSSのtransform | true |
| variableWidth | スライド幅の自動計算を無効 | false |
| vertical | 縦方向にスライド | false |
| verticalSwiping | 縦方向のスワイプ | false |
| rtl | スライド方向を逆 | false |
| waitForAnimate | スライドアニメーション中に別のスライドへのスライドを無効 | true |
| zIndex | z-indexの値 | 1000 |
いくつか補足していきます。
centerModeとcenterPaddding
まずcenterModeは左右に前後のスライドを少し見せたい時に使います。
そしてcenterPaddingは左右のスライドが見える幅を設定するオプションになります。
左右に前後のスライドを少し見せるスライダーの作り方は以下の記事を参照下さい。
-
slickで左右チラ見せスライダーを作る方法【centerMode（センターモード）使用】
続きを見る
dotsとdotsClass
まずdotsはスライダーの下に表示されるドットインジケーターの事で、デフォルトでは非表示となっています。
そしてこのドットのデザインを変更したい場合にdotsClassを使います。
ドットインジケーターのデザインを変える方法については以下の記事を参照下さい。
-
【slick】ドットインジケーターをカスタマイズする方法
続きを見る
prevArrowとnextArrow
これは前・次の矢印のカスタマイズで使います。
矢印のデザインを変えたい時、例えば画像に変更したい時などに使います。
こちらの記事に矢印のデザインをカスタマイズする方法を書いているので、参照下さい。
-
【slick】前へ次への矢印をカスタマイズする方法（CSSと画像で変更）
続きを見る
responsive
これは設定したブレイクポイント以下になったらスライドの表示数を減らしたりするときに使います。
設定出来るのはスライドの枚数だけでなく、他のオプションも設定可能です。
設定方法については以下の記事を参照下さい。
-
【slick】レスポンシブ対応！ブレイクポイントでスライドの表示枚数を変える方法
続きを見る
vertical
通常は横にスライドしますが、これを設定することで縦方向にスライドさせることが出来ます。
画像のスライダーではあまり使用する機会はないかも知れませんが、新着情報を流すニュースティッカーなどで使用することがあります。
ニュースティッカーの作り方については以下の記事を参照下さい。
-
【slick】縦に流れるニュースティッカーを作る方法（WordPressの実装方法も解説）
続きを見る
rtl
これは名前だけ見ても分からないと思いますが、通常右から左に流れるスライドを左から右へと逆方向にする設定となります。
デフォルトではfalseとなっていますが、これをtrueにするだけでは上手くいきません。
これを使った無限ループのスライダーの作り方は以下の記事で解説しているので、参照下さい。
-
【slick】横方向に流れ続ける無限ループスライダーを作る方法
続きを見る
まとめ
今回はslickのオプションをご紹介しました。
全てを理解する必要はないと思うので、よく使う物から使えるようになっていけばOKです。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧
