Topへ

開発ブログ(Blog)

bxSliderパラメータのまとめ

bxSliderという比較的メジャーなJqueryプラグインがありますが、そのパラメータをまとめてみました。

ご本家のURL:http://bxslider.com/
パラメータ 説明 デフォルト値
mode ‘horizontal’は水平移動、’vertical’は垂直移動, ‘fade’はフェード horizontal 'horizontal', 'vertical', 'fade'
speed スライドの遷移時間(単位はミリ秒) 500  
slideMargin サムネイル間の余白(単位はpx) 0  
startSlide 最初に表示するスライド番号(先頭は0) 0  
randomStart スライド表示をランダムに表示する false  
slideSelector スライドのセレクタを指定 '' 'div.slide'
infiniteLoop ループさせるか否か true  
hideControlOnEnd スライドが最後の時に、次へのリンクを消すか否か false  
easing イージングの設定※easingのプラグインが必要 null 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'swing'
captions trueにすると、imgタグのtitleに設定したのが出ます。 false  
ticker 文字をスライドさせるか否か false  
tickerHover マウスをスライダーの上に置いたときにティッカーが一時停止します。注:この機能は、CSSのトランジションを使用している場合は動作しません! false  
adaptiveHeight スライドの高さが違う場合、それぞれ調節して合わせるかどうか false  
adaptiveHeightSpeed スライド高さ(ミリ秒)遷移時間。注:adaptiveHeight使用時のみ使用 500  
video すべてのスライドにビデオが含まれている場合は、これをtrueに設定してください。プラグインjquery.fitvids.jsが必要
詳細はhttp://fitvidsjs.com/を参照してください
false  
responsive 画面のサイズに合わせて自動調整する。注:固定幅のスライダーを使用する必要がある。 true  
useCSS 水平および垂直スライドアニメーションのために使用されます。 falseの場合、jQueryのanimate() が使用されます。 true  
preloadImages 「all」場合は、スライダーを開始する前に、すべての画像をプリロード。もし、スライダを開始する前に、最初に表示されるスライド内のイメージだけプリロードする場合「visible」を指定。(ヒント:すべてのスライドが同一の寸法であれば「visible」'を使用) ''visible' 'all', 'visible'
touchEnabled スワイプできるようにするか否か(スマートフォン) true  
swipeThreshold ピクセルの量。タッチスワイプ使用時は、スライドトランジションを実行するために超える必要がある。注:touchEnabled場合にのみ使用 50  
oneToOneTouch trueの場合、スワイプした時のイメージのスイッチの仕方を、指にひっつくように自在に動かす true  
preventDefaultSwipeX trueの場合、スワイプなどをx軸に沿って移動させない true  
preventDefaultSwipeY trueの場合、スワイプなどをy軸に沿って移動させない false  
<ページャ>      
パラメータ 説明 デフォルト値
pager ページャーの有無 true  
pagerType 「full」の場合は、ページャのリンクはスライドごとに生成されます。 「short」の場合、x/yのページャが使用されます(例:1/5)の場合 'full' 'full','short'
pagerShortSeparator pagerTypeを指定した場合:「short」の場合は、ペジャーは、区切り文字としてこの値を使用します ' / '  
pagerSelector 要素をページャに追加するために使用される。デフォルトでは、'bx-viewport'に追加されます ''  
pagerCustom 親要素は、ページャとして使用される。親要素は、各スライドに要素が含まれている必要があります null  
buildPager サムネイルページャーの指定 null  
<制御>      
パラメータ 説明 デフォルト値
controls 次へ、前へ等のコントロールの有無 true  
nextText 次へのテキスト 'Next'  
prevText 前へのテキスト 'Prev'  
nextSelector "次へ”矢印をカスタマイズするための記述 null  
prevSelectort "前へ”矢印をカスタマイズするための記述 null  
autoControls trueの場合、「スタート」/「停止」のコントロールが追加されます false  
startText 自動ボタンのテキスト 'Start'  
stopText ストップボタンのテキスト 'Stop'  
autoControlsCombine スライドショーのみを再生しているときは「停止」コントロールが表示されます false  
autoControlsSelector 自動制御する為の要素を指定 null jQuery selector
<自動制御>      
パラメータ 説明 デフォルト値
auto 自動スタート再生さるか否か false  
pause スライドの切り替えの間隔 4000  
autoStart 起動時に自動的にスライドショーを開始、falseの場合「スタート」コントロールがクリックされたときに、スライドショーが開始されます true  
autoDirection スライドショーの表示開始方向 'next' 'next','prev'
autoHover マウスをスライダーの上に置いたときにオートショーが一時停止します false  
autoDelay スライドショー開始前に指定時間(ミリ秒)遅延させる 0  
<カルーセル>      
パラメータ 説明 デフォルト値
minSlides 1スライドに表示するサムネイルの数 1  
maxSlides 1スライドに表示するサムネイルの最大数 1  
moveSlides 指定された値だけスライドします。 0  
slideWidth サムネイルの横幅(単位はpx) 0  

<メソッド>

getCurrentSlide (現在選択されているスライド番号を取得)
getSlideCount (スライドの総数を取得)