【解説】slickのオプション一覧【カスタマイズまとめ】

記事内に広告を含みます

パソ君

・slickのオプションって何がある？

こんな疑問にお答えします。

slickを使えば簡単にスライダーを実装できます。

さらにオプションを活用すれば、様々なカスタマイズが可能です。

ただ多すぎて覚えるのが難しい。。

ジト

かなりあるよ！

ということで、この記事では「slickのオプション」についてまとめてみました！

この記事でわかること

slickのオプション一覧

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【解説】slickのオプション一覧【カスタマイズまとめ】
【解説】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