bxSliderの使い方と、オプションでのカスタマイズ方法

超簡単に設置できるjQueryの画像・スライダープラグイン「jquery.bxslider.js」の使い方と、オプションでのカスタマイズをまとめています。

bxSliderは、オプションでカルーセルやレスポンシブ対応にできる
bxSliderの使い方
bxSliderの読み込み
オプションの使い方
オプションの解説

jQuery関連記事

bxSliderは、オプションでカルーセルやレスポンシブ対応にできる

bxSliderの特徴は、画像スライドショーやカルーセルを、簡単に設置でき、オプションでカスタマイズがしやすいjQueryプラグインです。

また、レスポンシブ対応なので、スマホやタブレットなどの画面幅に合わせてサイズを自動調整してくれます。

bxSliderの使い方

まずは、bxSliderをGitHubの「dist」から下記2点をダウンロードしてください。
・jquery.bxslider.min.css
・jquery.bxslider.min.js

GitHub - stevenwanderski/bxslider-4: Responsive jQuery content slider

Responsive jQuery content slider. Contribute to stevenwanderski/bxslider-4 development by creating an account on GitHub.

bxSliderの読み込み

<link rel="stylesheet" href="jquery.bxslider.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<script>
  $(document).ready(function () {
    $('#bxslider').bxSlider();
  });
</script>

htmlのhead内に上記を記述します。
jquery.bxslider.css、
jQuery本体、
jquery.bxslider.jsの順に読み込みます。

その後、<script>タグで、bxSliderを適用する要素を指定します。上記の場合は、'#bxslider'がbxSliderを適用する要素です。
これだけで最低限の機能が使えます。
オプションによっては、下記も読み込ませてください。

<script src="jquery.fitvids.js"></script>
<script src="jquery.easing.1.3.js"></script>

See the Pen
by むぅ (@mugenweb)
on CodePen.0

オプションの使い方

<script>
  $(document).ready(function () {
    $('#bxslider').bxSlider({
      auto: true,
      pager: false,
      speed: 700
    });
  });
</script>

オプションは、$('#bxslider').bxSlider({オプション})の形で記述します。
プロパティと値をコロン「:」で区切り、さらに各オプションをカンマ「,」によって区切ります。
オプションの最後にカンマをつけてあったり、途中のカンマが抜けていたりすると、bxsliderが動かない原因になりますので、注意して下さい。

オプションの解説

基本設定

オプション項目	オプション説明	オプション記述方法
mode	スライド方法を設定「horizontal」横方向のスライド「vertical」縦方向のスライド「fade」フェードでの切り替え初期値は‘horizontal’	horizontal / vertical / fade
speed	スライドするスピードの設定初期値は500	数字（例：1000）
slideMargin	各スライド間の余白を設定初期値は0	数字（例：20）
startSlide	最初に表示するスライド要素を設定初期値は0	数字（例：2）
randomStart	最初に表示するスライド要素をランダムに設定初期値はfalse	true / false
slideSelector	スライド要素を自分で用意する場合の設定 jQueryのセレクタで指定初期値は”	任意のクラスやID（例：’#slideSelector’）
infiniteLoop	スライドをループさせるかどうかの設定初期値はtrue	true / false
hideControlOnEnd	次または前にスライド要素が無い時にコントロールを非表示にする設定 infiniteLoopがfalseのときのみ有効初期値はfalse	true / false
easing	イージングの設定 CSSを使用する場合はtransition-timing-functionプロパティを、使用しない場合はjquery.easing.jsから使用する初期値はnull	useCSSがtrueの場合 ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’ useCSSがfalseの場合 ‘swing’, ‘linear’
captions	キャプションの設定画像のtitle属性を使用する初期値はfalse	true / false
ticker	ニュースティッカーモードで使用する初期値はfalse	true / false
tickerHover	マウスをスライダー上に置いたときにティッカーを一時停止するか設定 CSSトランジションを使用している場合は動作しない (useCSS: true のとき) 初期値はfalse	true / false
adaptiveHeight	スライダーの高さの自動調整初期値はfalse	true / false
adaptiveHeightSpeed	スライダーの高さの遷移時間の設定 adaptiveHeightがtrueのときのみ初期値は500	数字（例：1000）
video	スライダーに含まれているvideoをレスポンシブにする場合はtrueに設定使用する場合はjquery.fitvids.jsを別途読み込む (ダウンロードしたプラグインのフォルダに含まれている) 初期値はfalse	true / false
responsive	レスポンシブに対応するかどうかの設定初期値はtrue	true / false
useCSS	スライドにCSSアニメーションを使用するかどうかの設定初期値はtrue	true / false
preloadImages	画像読み込みのタイミングを設定 preloadImages: ‘all’ 開始前に全ての画像を読み込む preloadImages: ‘visible’ 最初に表示される画像だけ最初に読み込む(初期値)	‘all’, ‘visible’
touchEnabled	タッチスワイプを許可するかを設定初期値はtrue	true / false
swipeThreshold	スライドをスクロールさせるために必要なスワイプの量を設定	数字（例：80）
oneToOneTouch	スワイプすると画像が指を追従するようにする	true / false
preventDefaultSwipeX	X軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できる	true / false
preventDefaultSwipeY	Y軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できる	true / false

ページャー

オプション項目	オプション説明	オプション記述方法
pager	ページ送りを追加するかどうかの設定。初期値はtrue。	true / false
pagerType	ページ送りのタイプを設定。 pagerType: ‘full’ スライダーの数だけ黒点の表示(初期値) pagerType: ‘short’ [現在位置] / [全枚数]の形で表示	‘full’, ‘short’
pagerShortSeparator	pagerType: ‘short’のときの区切り線の設定。初期値は’ / ‘。	‘\|’など
pagerSelector	指定した位置にページ送りを追加する。 jQueryのセレクタで指定。初期値は”。	任意のクラスやID（例：’#pagerSelector’）
pagerCustom	ページ送りを自分で用意する場合の設定。 jQueryのセレクタで指定。初期値はnull。	任意のクラスやID（例：’#pagerCustom’）
buildPager	サムネイルページャーの指定。初期値はnull。	それぞれを設定

コントローラー

オプション項目	オプション説明	オプション記述方法
controls	前後のコントロールを追加するかどうかの設定。初期値はtrue。	true / false
nextText	nextのテキストを設定。初期値は’Next’。	任意のテキスト（例：次）
prevText	prevのテキストを設定。初期値は’Prev’。	任意のテキスト（例：前）
nextSelector	nextを自分で用意する場合に設定。 jQueryのセレクタを指定。初期値はnull。	任意のクラスやID（例：’#nextSelector’）
prevSelector	prevを自分で用意する場合に設定。 jQueryのセレクタを指定。初期値はnull。	任意のクラスやID（例：’#prevSelector’）
autoControls	自動スライドのコントロールを表示するかどうか設定。初期値はfalse。	true / false
startText	自動スライドのstartのテキストを設定。初期値は’Start’。	任意のテキスト（例：開始）
stopText	自動スライドのstopのテキストを設定。初期値は’Stop’。	任意のテキスト（例：停止）
autoControlsCombine	自動スライド時、停止時でコントロールのボタンを出し分けるかどうか設定。初期値はfalse。	true / false
autoControlsSelector	自動スライドのコントロールを自分で用意する場合に設定。初期値はnull。	任意のクラスやID（例：’#autoControlsSelector’）

オートスクロール関係

オプション項目	オプション説明	オプション記述方法
auto	自動スライドの設定。初期値はfalse。	true / false
pause	自動スライドの待ち時間の設定。初期値は4000。	数字（例：1000）
autoStart	読み込み後に自動スライドを開始するかどうか設定。初期値はtrue。	true / false
autoDirection	自動スライドの方向の設定。 autoDirection: ‘next’ 次へスライド(初期値) autoDirection: ‘prev’ 前へスライド	‘next’, ‘prev’
autoHover	スライダーにホバーしたときに自動スライドを停止させるかどうか設定。初期値はfalse。	true / false
autoDelay	自動スライドを開始するまでの待ち時間の設定。初期値は0。	数字（例：1000）

カルーセルスライダー

オプション項目	オプション説明	オプション記述方法
minSlides	一度に表示させる最小数を設定。初期値は1。	数字（例：2）
maxSlides	一度に表示させる最大数を設定。初期値は1。	数字（例：3）
moveSlides	カルーセル表示のときに移動するスライド数の設定。初期値は0。	数字（例：1）
slideWidth	各スライドの幅を指定。初期値は0。	数字（例：300）

コールバック

オプション項目	オプション説明	オプション記述方法
onSliderLoad	スライダーが読み込まれた直後に実行。	処理を記述
onSlideBefore	スライドする直前に実行。	処理を記述
onSlideAfter	スライドした直後に実行。	処理を記述
onSlideNext	nextが実行される直前に実行。	処理を記述
onSlidePrev	prevが実行される直前に実行。	処理を記述

パブリックメソッド

オプション項目	オプション説明	オプション記述方法
goToSlide	指定要素へジャンプさせる。	slider.goToSlide(3);
goToNextSlide	nextを実行。	slider.goToNextSlide();
goToPrevSlide	prevを実行。	slider.goToNextSlide();
startAuto	自動再生をスタート。	slider.startAuto();
stopAuto	自動再生をストップ。	slider.stopAuto();
getCurrentSlide	現在アクティブなスライド要素のインデックス番号を取得	var current = slider.getCurrentSlide();
getSlideCount	スライド要素の総数を取得	var slideQty = slider.getSlideCount();
reloadSlider	スライダーをリロードします。	slider.reloadSlider();
destroySlider	スライダーのjsを一切読んでない状態に戻します。	slider.destroySlider();