[jQuery]bxSliderオプション多すぎたので日本語でコメントつけといた

昨日の続き。
とりあえず、公式サイトは目を通した。
オプション豊富で素晴らしいってことはわかった。

ただ、覚えきれない。
読みながらコメント書いたので忘れないように。

// スライドモードを指定する
// horizontal, vartivcal, fadeの3パターン
mode: 'horizontal', // horizontal

// スライダーの対象とする子要素を指定する
// セレクタの指定はjQueryのセレクタルールを利用する
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() {}

最近、jQueryのプラグインDisな記事が増えてきた気がするけど、「bxSlider 使い方」とか「bxSlider カスタマイズ」とか、検索すれば先人の知恵にあずかれるのはやはり有名プラグインのいいところ。

[jQuery]bxSliderオプション多すぎたので日本語でコメントつけといた」への1件のフィードバック

  1. ピンバック: レスポンシブ対応でカルーセルもできるカスタマイズ性抜群の「bxSlider」 | Web模様

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です