スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」の使い方をメモ。
使い方
下記からダウンロードできます。
jQuery Content Slider | Responsive jQuery Slider | bxSlider
ダウンロード後、必要なファイルを読み込みます。
<link rel="stylesheet" href="jquery.bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script>
使用するオプションによっては、下記ファイルの読み込みも必要になります。
jQuery本体とjquery.bxslider.jsの間に読み込ませてください。
<script src="jquery.fitvids.js"></script> <script src="jquery.easing.1.3.js"></script>
HTML
<ul id="sample01"> <li><img src="img/img01.jpg" /></li> <li><img src="img/img02.jpg" /></li> <li><img src="img/img03.jpg" /></li> <li><img src="img/img04.jpg" /></li> <li><img src="img/img05.jpg" /></li> <li><img src="img/img06.jpg" /></li> <li><img src="img/img07.jpg" /></li> <li><img src="img/img08.jpg" /></li> </ul>
JavaScript
<script type="text/javascript">
$(function() {
$('#sample01').bxSlider();
});
</script>
オプション
オプション設定のデモページはこちら。
オプションについて詳しくは、公式で用意されているオプションやサンプルをご確認ください。
General
| mode | スライド方法を設定。 mode: ‘horizontal’ 横方向のスライド(初期値) mode: ‘vertical’ 縦方向のスライド mode: ‘fade’ フェードでの切り替え |
|---|---|
| speed | スライドするスピードの設定。 初期値は500。 |
| slideMargin | 各スライド間の余白を設定。 初期値は0。 |
| startSlide | 最初に表示するスライド要素を設定。 初期値は0。 |
| randomStart | 最初に表示するスライド要素をランダムに設定。 初期値はfalse。 |
| slideSelector | スライド要素を自分で用意する場合の設定。 jQueryのセレクタで指定。 初期値は”。 |
| infiniteLoop | スライドをループさせるかどうかの設定。 初期値はtrue。 |
| hideControlOnEnd | 次または前にスライド要素が無い時にコントロールを非表示にする設定。 infiniteLoopがfalseのときのみ有効。 初期値はfalse。 |
| easing | イージングの設定。 CSSを使用する場合はtransition-timing-functionプロパティを、使用しない場合はjquery.easing.jsから使用する。 初期値はnull。 |
| captions | キャプションの設定。 画像のtitle属性を使用する。 初期値はfalse。 |
| ticker | ニュースティッカーモードで使用する。 初期値はfalse。 |
| tickerHover | マウスをスライダー上に置いたときにティッカーを一時停止するか設定。 CSSトランジションを使用している場合は動作しない。 (useCSS: true のとき。) 初期値はfalse。 |
| adaptiveHeight | スライダーの高さの自動調整。 初期値はfalse。 |
| adaptiveHeightSpeed | スライダーの高さの遷移時間の設定。 adaptiveHeightがtrueのときのみ。 初期値は500。 |
| video | スライダーに含まれているvideoをレスポンシブにする場合はtrueに設定。 使用する場合はjquery.fitvids.jsを別途読み込む。 (ダウンロードしたプラグインのフォルダに含まれている。) 初期値はfalse。 |
| responsive | レスポンシブに対応するかどうかの設定。 初期値はtrue。 |
| useCSS | スライドにCSSアニメーションを使用するかどうかの設定。 初期値はtrue。 |
| preloadImages | 画像読み込みのタイミングを設定。 preloadImages: ‘all’ 開始前に全ての画像を読み込む preloadImages: ‘visible’ 最初に表示される画像だけ最初に読み込む(初期値) |
| touchEnabled | タッチスワイプを許可するかを設定。 初期値はtrue。 |
| swipeThreshold | スワイプしたと見なす最低限の移動距離の設定？ touchEnabled :trueのときのみ有効。 初期値は50。 |
| oneToOneTouch | 縦または横方向のスライドで、スワイプ時に要素を移動させるかどうかの設定？ 初期値はtrue。 |
| preventDefaultSwipeX | スワイプ時にデフォルトのスクロール(X方向)を切るかどうかの設定？ 初期値はtrue。 |
| preventDefaultSwipeY | スワイプ時にデフォルトのスクロール(Y方向)を切るかどうかの設定？ 初期値はfalse。 |
Pager
| pager | ページ送りを追加するかどうかの設定。 初期値はtrue。 |
|---|---|
| pagerType | ページ送りのタイプを設定。 pagerType: ‘full’ スライダーの数だけ黒点の表示(初期値) pagerType: ‘short’ [現在位置] / [全枚数]の形で表示 |
| pagerShortSeparator | pagerType: ‘short’のときの区切り線の設定。 初期値は’ / ‘。 |
| pagerSelector | 指定した位置にページ送りを追加する。 jQueryのセレクタで指定。 初期値は”。 |
| pagerCustom | ページ送りを自分で用意する場合の設定。 jQueryのセレクタで指定。 初期値はnull。 |
| buildPager | ページ送りの各中身を設定。 初期値はnull。 |
Controls
| controls | 前後のコントロールを追加するかどうかの設定。 初期値はtrue。 |
|---|---|
| nextText | nextのテキストを設定。 初期値は’Next’。 |
| prevText | prevのテキストを設定。 初期値は’Prev’。 |
| nextSelector | nextを自分で用意する場合に設定。 jQueryのセレクタを指定。 初期値はnull。 |
| prevSelector | prevを自分で用意する場合に設定。 jQueryのセレクタを指定。 初期値はnull。 |
| autoControls | 自動スライドのコントロールを表示するかどうか設定。 初期値はfalse。 |
| startText | 自動スライドのstartのテキストを設定。 初期値は’Start’。 |
| stopText | 自動スライドのstopのテキストを設定。 初期値は’Stop’。 |
| autoControlsCombine | 自動スライド時、停止時でコントロールのボタンを出し分けるかどうか設定。 初期値はfalse。 |
| autoControlsSelector | 自動スライドのコントロールを自分で用意する場合に設定。 初期値はnull。 |
Auto
| auto | 自動スライドの設定。 初期値はfalse。 |
|---|---|
| pause | 自動スライドの待ち時間の設定。 初期値は4000。 |
| autoStart | 読み込み後に自動スライドを開始するかどうか設定。 初期値はtrue。 |
| autoDirection | 自動スライドの方向の設定。 autoDirection: ‘next’ 次へスライド(初期値) autoDirection: ‘prev’ 前へスライド |
| autoHover | スライダーにホバーしたときに自動スライドを停止させるかどうか設定。 初期値はfalse。 |
| autoDelay | 自動スライドを開始するまでの待ち時間の設定。 初期値は0。 |
Carousel
| minSlides | 一度に表示させる最小数を設定。 初期値は1。 |
|---|---|
| maxSlides | 一度に表示させる最大数を設定。 初期値は1。 |
| moveSlides | カルーセル表示のときに移動するスライド数の設定。 初期値は0。 |
| slideWidth | 各スライドの幅を指定。 初期値は0。 |
Callbacks
| onSliderLoad | スライダーが読み込まれた直後に実行。 |
|---|---|
| onSlideBefore | スライドする直前に実行。 |
| onSlideAfter | スライドした直後に実行。 |
| onSlideNext | nextが実行される直前に実行。 |
| onSlidePrev | prevが実行される直前に実行。 |
Public methods
| goToSlide | 指定要素へスライドする。 |
|---|---|
| goToNextSlide | nextを実行。 |
| goToPrevSlide | prevを実行。 |
| startAuto | 自動スライドの開始。 |
| stopAuto | 自動スライドの停止。 |
| getCurrentSlide | 現在表示されているスライドを返す。 |
| getSlideCount | スライダーのスライド要素の総数を返す。 |
| reloadSlider | スライダーをリロードする。 設定の変更もできる。 スライド要素が増えたり減ったりしたときに。 |
| destroySlider | スライダーをプラグインを読み込む前の状態(初期状態)に戻す。 |
【参考サイト】
こんにちは、学校の課題でbxsliderを含んだウェブサイトを作らないといけなくなり、このサイトにたどり着きました。プログラミングに関しては全くの初心者で最近CSSとHTMLがどのように連携をとっているか理解したばかりです。
bxsliderを二つ並べて片方を下から上へ画像が流れるように（mode: ‘vertical’では下から上が初期設定）、もう片方が上から下へ画像が流れるようにしたいのですが、どうしたら画像を上から下へ流せるかが分かりません。
今tableを使って、二つのbxsliderを並べて両方とも下から上へ流れている状態です。理想では片方を下から上、もう片方を上から下へながして、一つの大きな画像を作り上げたいと思っています。
このようなことはできるようになってますか。それとも、片方のbxsliderをまるごとひっくり返して設置することは可能でしょうか。（スライダーをひっくり返して、画像を上下逆さまの状態で入れれば、実質やりたいことだから。。。。）
何か方法があったらどうか教えてください。あわよくば、時間があれば、CSSとHTMLとjqueryのところにコピペ刷ればいいことを教えて頂ければ助かります、、、、、、、。
長々と失礼しました
ローさん
コメントありがとうございます。
上から下へ画像が流れるというのは、自動再生(auto:true)やティッカーモード(ticker:true)でのことでしょうか？
自動再生やティッカーモードでしたら、autoDirection: ‘prev’を合わせて設定することで、向きを反対にすることができます。
サンプルを以下に置いています。
https://cly7796.net/blog/sample/plugin-jquery-bxslider/index4.html
もし意図したものと違うようでしたら、コメントいただけますと幸いです。
はじめまして
bxsliderの使い方でこちらにたどり着きました。
WEB制作の初心者なもので使い方を教えていただけたらとコメントを残させていただきました。
特定のサイズ以下ではスライダーが実行され、それ以外のサイズではスライダーを読み込まないというものを考えています。
$(window).on(‘load resize’, function(){
var w = $(window).width();
var x = 768;
if (w <= x) {
slider = $('.bxslider').bxSlider();
}
else {
slider.destroySlider();
}
});
destroySliderを使えば戻るのかと思い使用してみたのですが、思ったような動作になりませんでした。
助けていただけたら幸いです。
よろしくお願いします。
岡村さん
コメントありがとうございます。
destroySliderはスライダーを初期状態に戻すものですので、
スライダーになっていない1回目では使用できません。
そのため、
1.ページにアクセスした1回目の処理
2.画面サイズを変更したときの処理
の2種類が必要になります。
以下にサンプルページを置いていますので、ご確認頂ければと思います。
コード内にコメントで簡単に処理の説明も入れています。
https://cly7796.net/blog/sample/plugin-jquery-bxslider/index3.html
こんなに詳しく解説していただいて本当にありがとうございました！
明日ゆっくり学ばせていただきます。
本当に助かりました！