サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jquery.bxslider.jsの使い方やオプションなどのまとめ

jquery.bxslider.jsの使い方やオプションなどのまとめ

スライダーを簡単に実装できる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>

jquery.bxslider.jsのデモページ
 

オプション

オプション設定のデモページはこちら。
オプションについて詳しくは、公式で用意されているオプションサンプルをご確認ください。

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 スライダーをプラグインを読み込む前の状態(初期状態)に戻す。

 

【参考サイト】

 

“jquery.bxslider.jsの使い方やオプションなどのまとめ” への6件のフィードバック

  1. […] jquery.bxslider.jsの使い方やオプションなどのまとめ […]

  2. ロー より:

    こんにちは、学校の課題でbxsliderを含んだウェブサイトを作らないといけなくなり、このサイトにたどり着きました。プログラミングに関しては全くの初心者で最近CSSとHTMLがどのように連携をとっているか理解したばかりです。
    bxsliderを二つ並べて片方を下から上へ画像が流れるように(mode: ‘vertical’では下から上が初期設定)、もう片方が上から下へ画像が流れるようにしたいのですが、どうしたら画像を上から下へ流せるかが分かりません。
    今tableを使って、二つのbxsliderを並べて両方とも下から上へ流れている状態です。理想では片方を下から上、もう片方を上から下へながして、一つの大きな画像を作り上げたいと思っています。
    このようなことはできるようになってますか。それとも、片方のbxsliderをまるごとひっくり返して設置することは可能でしょうか。(スライダーをひっくり返して、画像を上下逆さまの状態で入れれば、実質やりたいことだから。。。。)
    何か方法があったらどうか教えてください。あわよくば、時間があれば、CSSとHTMLとjqueryのところにコピペ刷ればいいことを教えて頂ければ助かります、、、、、、、。

    長々と失礼しました

    • cly7796.net より:

      ローさん
      コメントありがとうございます。

      上から下へ画像が流れるというのは、自動再生(auto:true)やティッカーモード(ticker:true)でのことでしょうか?
      自動再生やティッカーモードでしたら、autoDirection: ‘prev’を合わせて設定することで、向きを反対にすることができます。
      サンプルを以下に置いています。
      http://cly7796.net/wp/sample/plugin-jquery-bxslider/index4.html

      もし意図したものと違うようでしたら、コメントいただけますと幸いです。

  3. 岡村 より:

    はじめまして
    bxsliderの使い方でこちらにたどり着きました。
    WEB制作の初心者なもので使い方を教えていただけたらとコメントを残させていただきました。

    特定のサイズ以下ではスライダーが実行され、それ以外のサイズではスライダーを読み込まないというものを考えています。

    $(window).on(‘load resize’, function(){
    var w = $(window).width();
    var x = 768;
    if (w <= x) {
    slider = $('.bxslider').bxSlider();
    }
    else {
    slider.destroySlider();
    }
    });

    destroySliderを使えば戻るのかと思い使用してみたのですが、思ったような動作になりませんでした。
    助けていただけたら幸いです。
    よろしくお願いします。

    • cly7796.net より:

      岡村さん
      コメントありがとうございます。

      destroySliderはスライダーを初期状態に戻すものですので、
      スライダーになっていない1回目では使用できません。

      そのため、
      1.ページにアクセスした1回目の処理
      2.画面サイズを変更したときの処理
      の2種類が必要になります。

      以下にサンプルページを置いていますので、ご確認頂ければと思います。
      コード内にコメントで簡単に処理の説明も入れています。
      http://cly7796.net/wp/sample/plugin-jquery-bxslider/index3.html

      • 岡村 より:

        こんなに詳しく解説していただいて本当にありがとうございました!
        明日ゆっくり学ばせていただきます。
        本当に助かりました!

参考URL – web備忘録集 にコメントする コメントをキャンセル

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

▲PAGE TOP