bxSlilder

スライドショー・サンプル

スライドショー・サンプル

bxSlilder

オフィシャルサイト

オプション設定

// スライドモードを指定する
// 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() {}