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
preventDefaultSwipeXX軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できるtrue / false
preventDefaultSwipeYY軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できるtrue / false

ページャー

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

コントローラー

オプション項目オプション説明オプション記述方法
controls前後のコントロールを追加するかどうかの設定。
初期値はtrue。
true / false
nextTextnextのテキストを設定。
初期値は’Next’。
任意のテキスト(例:次)
prevTextprevのテキストを設定。
初期値は’Prev’。
任意のテキスト(例:前)
nextSelectornextを自分で用意する場合に設定。
jQueryのセレクタを指定。
初期値はnull。
任意のクラスやID(例:’#nextSelector’)
prevSelectorprevを自分で用意する場合に設定。
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スライドした直後に実行。処理を記述
onSlideNextnextが実行される直前に実行。処理を記述
onSlidePrevprevが実行される直前に実行。処理を記述

パブリックメソッド

オプション項目オプション説明オプション記述方法
goToSlide指定要素へジャンプさせる。slider.goToSlide(3);
goToNextSlidenextを実行。slider.goToNextSlide();
goToPrevSlideprevを実行。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の基本的な使い方は下...

コメント

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