jQuery 2024.02.06

【Slick】オプションコード一覧

Slickは、ウェブサイトにスライダーやカルーセルを追加するのに非常に便利なライブラリです。この記事では、Slickのオプションコードとその意味について詳しく説明します。Slickを最大限に活用するために、各オプションの用途と初期値を理解しましょう。

1 よく使われるオプション
2 その他オプション
3 まとめ
4 参考サイト

よく使われるオプション

以下は、Slickでよく使われるオプションの一覧です。それぞれのオプションについて、その役割と初期値を説明します。

オプション名	用途	初期値
autoplay	自動再生の有効化	false
dots	ページネーションドットの表示	true
arrows	前後の矢印ボタンの表示	true
infinite	ループ再生の有効化	true
speed	スライドの切り替え速度（ミリ秒単位）	300
slidesToShow	一度に表示するスライドの数	1
slidesToScroll	一度にスクロールするスライドの数	1

これらのオプションは、Slickスライダーをカスタマイズする際に頻繁に使用されます。たとえば、autoplayをtrueに設定すると、スライダーが自動でスライドを切り替えます。

その他オプション

以下は、Slickに存在するその他のオプションの一覧です。これらのオプションもカスタマイズに利用できます。詳細な説明と初期値を示します。

オプション名	用途	初期値
accessibility	キーボード操作によるアクセシビリティを有効にする	true
adaptiveHeight	スライドの高さをコンテンツに合わせて自動調整する	false
appendDots	ページネーションドットを指定の要素に追加	false
appendArrows	前後の矢印ボタンを指定の要素に追加	false
asNavFor	別のSlickスライダーと連動させるためのセレクタ	null
autoplaySpeed	自動再生のスピード（ミリ秒単位）	3000
centerMode	中央揃えモードを有効にする	false
centerPadding	中央揃えモード時の左右の余白幅（ピクセル単位）	’50px’
cssEase	CSSトランジションのイージング関数を指定	‘ease’
customPaging	ページネーションドットのカスタム表示を設定	null
draggable	ドラッグによるスライド切り替えを有効にする	true
easing	切り替えアニメーションのイージング関数を指定	‘linear’
fade	フェードイン/フェードアウトアニメーションを有効にする	false
focusOnSelect	クリックしたスライドをフォーカスする	false
lazyLoad	遅延読み込みイメージを有効にする	‘ondemand’
mobileFirst	レスポンシブ設定がモバイルファーストかどうかを指定	false
pauseOnFocus	スライダーがフォーカスされたときに自動再生を一時停止する	true
pauseOnHover	スライダーにカーソルが乗ったときに自動再生を一時停止する	true
pauseOnDotsHover	ページネーションドットにカーソルが乗ったときに自動再生を一時停止する	false
respondTo	レスポンシブ設定に対するウィンドウの幅の種類を指定	‘window’
responsive	レスポンシブ設定をカスタマイズするためのオブジェクト	null
rows	行ごとに表示するスライドの数	1
rtl	ライトから左にスライドする（アラビア語などのRTL言語用）	false
slide	スライド要素のセレクタを指定	”
slidesPerRow	行ごとに表示するスライドの数	1
slidesToShow	一度に表示するスライドの数	1
slidesToScroll	一度にスクロールするスライドの数	1
speed	スライドの切り替え速度（ミリ秒単位）	300
swipe	スワイプによるスライド切り替えを有効にする	true
swipeToSlide	スワイプによるスライド切り替えを許可する	true
touchMove	タッチによるスワイプを有効にする	true
touchThreshold	タッチスワイプを開始するための移動しきい値（ピクセル単位）	5
useCSS	CSSトランジションを使用するかどうかを指定	true
useTransform	CSS3のtransformプロパティを使用するかどうかを指定	true
variableWidth	可変幅のスライドを有効にする	false
vertical	垂直方向へのスライドを有効にする	false
verticalSwiping	垂直方向へのスワイプを有効にする	false