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

プロモーションが含まれています

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


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

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();

使い方のサンプルは下記でどうぞ。

bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種
レスポンシブ対応の便利なjQueryプラグイン「jquery.bxslider.js」のbxSliderをカルーセルや、コンテンツスライダーなど、デザインサンプル5種を作りました。bxSliderの基本的な使い方は下記からどうぞ!jQuer...

コメント

タイトルとURLをコピーしました