// スライドモードを指定する
// horizontal（水平）, vartivcal（垂直）, fade（フェード）の3パターン
mode: 'horizontal', // horizontal
// スライダーの対象とする子要素を指定する
// セレクタの指定はjQueryのセレクタルールを利用する（div.slideなど）
slideSelector: '', // ''
// スライドを無限ループにする
infiniteLoop: true, // true
// 「前へ」「次へ」のコントロールの表示を制御する
// 最初のときは「前へ」最後のときが「次へ」を非表示にする
// 無限ループのときはこのオプションは無効になる
hideControlOnEnd: true, // false
// 一回のスライドにかかる時間を指定する（ミリ秒）
speed: 500, // 500
// イージングの種類を指定する
// イージングを利用するには別途プラグインをロードしておく必要がある
easing: null, // null
// スライド要素間のマージンを指定する
// これはカルーセル指定の時に画像間の距離を作るのに利用
slideMargin: 0, // 0
// スライドの開始ポイントを指定する
// 0スタートで任意の数値を指定できる
startSlide: 0, // 0
// スライドの開始ポイントをランダムにする
randomStart: false, // false
// 画像の下部に説明文を表示することができる
// 画像のtitleタグのテキストを表示
captions: false, // false
// tickerモードを有効にする
// スライダーが一定の速度でずっと流れる
// 新幹線の電光掲示板みたいなやつ
ticker: false, // false
// tickerモード時に、マウスオーバーされたら
// アニメーションを一時停止する
// ただし、useCSSがtrueの場合、このオプションは利用できない
tickerHover: false, // false
// スライド要素の高さに合わせてスライダーエリアの高さを調整する
adaptiveHeight: true, // false
// スライダーエリアの高さの調整のアニメーション時間を調整する
adaptiveHeightSpeed: 500, // 500
// 動画をレスポンシブに対応させる
// これを有効にするには別途ライブラリが必要になる
video: false, // false
// スライダーのアニメーションにCSSアニメーションを利用する
useCSS: true, // true
// 事前に読み込んでおく画像の種類を指定する
// 'visible', 'all'のどちらかを指定する
// カルーセルにする場合、内部で子要素の画像すべての指定に強制される
preloadImages: 'visible',
// TOUCH
// タッチデバイスに対応する
// trueにすることで、スワイプでもスライドするようになる
touchEnabled: true, // true
// スワイプ判定のための距離を指定する
swipeThreshold: 50, // 50
// スワイプの動きと画像のスライドを対応させる
// スワイプ動作に画像が連動するようなスライドをさせる
oneToOneTouch: true, // true
// X軸方向へのデフォルトのスワイプ操作の動きを制御する
// これで画像をスワイプしても画面はスワイプしないようにする
preventDefaultSwipeX: true, // true
// Y軸方向へのデフォルトのスワイプ操作の動きを制御する
preventDefaultSwipeY: false, // false
// PAGER
// ページャを表示する
pager: true, // true
// ページャの種類を指定する
// 'full', 'short'
// 'full'を指定すると、スライダー要素の数だけページャが表示
// 'short'を指定すると、現在の要素の順番と全体の要素数を表示
pagerType: 'full', // 'full'
// 'short'を指定した際の、現在の要素の順番と全体の要素数の区切り文字を指定
pagerShortSeparator: ' / ', // ' / '
// ページャを構築する要素を指定する
// セレクタはjQueryのセレクタを指定
// これを使うことで、任意のDOMに対してページャを配置できる
pagerSelector: null, // null
// ページャ作成用のメソッドを定義する
// ページャの各要素のDOMを返すメソッドを渡せる
buildPager: null, // null
// 指定した別のスライダー要素をページャとして利用する
// ページャと画像のマッピングはdata-slide-indexカスタム属性を利用して行われる
pagerCustom: null, // null
// CONTROLS
// コントロールを表示する
controls: true, // true
// 「次へ」ボタンのテキストを指定する
nextText: 'Next', // 'Next'
// 「前へ」ボタンのテキストを指定する
prevText: 'Prev', // 'Prev'
// 「次へ」ボタンとして利用する要素のセレクタを指定する
nextSelector: null, // null
// 「前へ」ボタンとして利用する要素のセレクタを指定する
prevSelector: null, // null
// 自動遷移のコントロールを表示する
// autoプロパティがtrueの場合にのみ有効になる
autoControls: false, // false
// 「スタート」ボタンのテキストを指定する
startText: 'Start', // 'Start'
// 「ストップ」ボタンのテキストを指定する
stopText: 'Stop', // 'Stop'
// 「スタート」「ストップ」のどちらか片方のボタンだけ表示
// 再生中は「ストップ」、停止中は「スタート」ボタンだけ表示される
autoControlsCombine: false, // false
// 自動遷移のコントロールを構築する要素を指定する
autoControlsSelector: null, // null
// AUTO
// 自動遷移を有効にする
auto: true, // false
// 自動遷移の間隔（停止時間）を指定する（ミリ秒）
pause: 4000, // 4000
// 自動遷移をロード時にスタートさせる
// これをfalseにした場合、コントロールから明示的にスタートする必要がある
// なので、コントロールが表示されていない場合は自動遷移が行われない
autoStart: true, // true
// 自動遷移の方向を指定する
// 'next', 'prev'のどちらかを指定
// 自動遷移の方向なので、「前へ」「次へ」は通常通りの方向へ遷移する
autoDirection: 'next', // 'next'
// マウスオーバー時に自動遷移を停止する
autoHover: false, // false
// 自動遷移を開始するまでの待ち時間を指定する
// 最初の要素だけ長く表示するなど、初回の遷移開始を遅らせることができる
autoDelay: 0, // 0
// CAROUSEL
// スライダーエリアに表示する最小の要素数を指定する
minSlides: 1, // 1
// スライダーエリアに表示する最大の要素数を指定する
maxSlides: 1, // 1
// 1回の遷移でスライドさせる要素の数を指定する
moveSlides: 0, // 0
// スライドさせる要素の大きさ（幅）を指定する
// デフォルトでは100%になり、スライドエリアと同じサイズになる
slideWidth: 0, // 0
// CALLBACKS
// スライダーがロード完了した際のコールバックを指定する
onSliderLoad: function() {},
// スライドが開始する前に実行したいコールバックを指定する
onSlideBefore: function() {},
// スライドが完了した後に実行したいコールバックを指定する
onSlideAfter: function() {},
// 「次へ」のスライドが行われる前に実行したいコールバックを指定する
// これはonSlideBeforeの後に実行される
onSlideNext: function() {},
// 「前へ」のスライドが行われる前に実行したいコールバックを指定する
// これはonSlideBeforeの後に実行される
onSlidePrev: function() {}
参考サイト
- HOZUNOMIYA
-
[jQuery]bxSliderオプション多すぎたので日本語でコメントつけといた
- https://hozunomiya.xyz/?p=83