contents
参考~オプション項目~
オプション項目 | 内容 | 初期値 |
---|---|---|
accessibility | タブと矢印キーのナビゲーション | true |
adaptiveHeight | スライドの高さ自動調整 | false |
autoplay | 自動的にスライドを変えるか(true/false) | false |
autoplaySpeed | 自動的にスライドを変えるタイミング(ミリ秒指定) | 3000 |
arrows | ナビゲーション用矢印を表示するか(true/false) | true |
asNavFor | スライダを他のスライダのナビゲーションに設定する(class名またはID名) | null |
appendArrows | スライドの左右の矢印ボタンを挿入する場所を設定する | $(element) |
appendDots | ドットインジケーターの場所を設定する | $(element) |
prevArrow | 左の矢印ボタンのHTMLをカスタマイズ | <button type=”button” class=”slick-prev”>Previous</button> |
nextArrow | 右の矢印ボタンのHTMLをカスタマイズ | <button type=”button” class=”slick-next”>Next</button> |
centerMode | スライドを中心に表示して部分的に前後のスライドが見えるように設定(奇数番号のスライドに使用) | false |
centerPadding | センターモード時のサイドパディング。 見切れるスライドの幅。’px’または’%’で指定。 |
50px |
cssEase | CSS3アニメーションイージングを設定 | ease |
customPaging | dots:trueのとき、ドットをカスタマイズ | n/a |
dots | ドットインジケーターを表示するか(true/false) | false |
dotsClass | ドットインジケーターのクラス名を設定 | slick-dots |
draggable | マウスでのドラッグ設定 | true |
fade | スライダーの切り替えをスライドではなくフェードインにする | false |
focusOnSelect | クリックでのスライド切り替えを有効にするか | false |
easing | jQueryアニメーションイージングを追加 | linear |
edgeFriction | infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定 | 0.15 |
infinite | スライドのループを有効にするか | true |
initialSlide | スライドの開始番号 | 0 |
lazyLoad | 画像の遅延読み込みを設定(’ondemand’もしくは’progressive’) | ondemand |
mobileFirst | レスポンシブの設定でモバイルの計算を優先させる | false |
pauseOnFocus | 自動再生時にスライドにフォーカスした際、自動再生をストップさせるか | true |
pauseOnHover | 自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか | true |
pauseOnDotsHover | 自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか | false |
respondTo | レスポンシブの基準を設定 (’window’もしくは’slider’もしくは’min’) |
window |
responsive | breakpointで設定したいブレイクポイントを設定(settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定) | none |
rows | スライドの行数を設定 (slidesPerRowを使用して、各行に含めるスライドの数を設定) |
1 |
slide | スライドとして使用する要素を設定 | ” |
slidesPerRow | rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定 | 1 |
slidesToShow | 表示するスライド数を設定 | 1 |
slidesToScroll | スクロールするスライド数を設定 | 1 |
speed | スライドをスライドイン/フェードさせる時間 (ミリ秒指定) |
300 |
swipe | スワイプを有効にするか | true |
swipeToSlide | slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かすか | false |
touchMove | タッチでスライドさせるか | true |
touchThreshold | スワイプでスライドさせる距離を設定(1 / touchThreshold)*スライダの幅 | 5 |
useCSS | CSS traditionを有効にするか | true |
useTransform | CSS transformを有効にするか | true |
variableWidth | 可変幅のスライド(スライドの幅をバラバラにするか) | false |
vertical | 垂直スライドモード | false |
verticalSwiping | 垂直のスワイプを有効にするか | false |
rtl | スライダの方向を右から左に変更するか | false |
waitForAnimate | スライドアニメーション中にスライドを前後させる要求を無視するか | true |
zIndex | スライドの重なり順 | 1000 |