bx sliderのオプションまとめ
Date 2016.03.01 Category blog
みんな大好きレスポンシブスライダー「bx slider」のオプションをまとめました。
STEP01 header内にファイルを読み込む
|
1 2 3 4 5 6 |
<!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> |
STEP02 HTMLにコードを記述
|
1 2 3 4 5 6 |
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul> |
STEP03 オプションを記述
|
1 2 3 |
$(document).ready(function(){ $('.bxslider').bxSlider(); }); |
bxslider.jsのオプションはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 |
// スライドモードを指定する // 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() {} |
