bxSlider カスタマイズとオプション一覧

bxSliderは、レスポンシンデザインに対応したカルーセルスライダーが作成できるライブラリです。

レスポンシブ対応なので様々な画面サイズに対応できて、ナビゲーションやページャーなどの多機能なコントロールを提供しており、カスタマイズ可能なオプションも豊富に用意されています。

スライドの速度やアニメーションの種類、自動再生などをカスタマイズできるオプションが多数あり、使いやすくて高機能なjQueryプラグインの一つです。

https://bxslider.com/

基本的な使い方

1. JavaScript、CSSを読み込む

CDNで読み込む場合は、jsdelivr、cdnjsで読み込むことができます。

bxsliderはjQueryプラグインなので、必ずjQueryを先に読み込みます。

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- bxsliderのJS -->
<script src="https://cdn.jsdelivr.net/npm/bxslider@4.2.14/dist/jquery.bxslider.min.js"></script>

<!-- bxslider css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bxslider@4.2.14/dist/jquery.bxslider.min.css">

2.スライダーのHTML

スライドコンテナに.bxsliderというclassをつけて、スライドする要素をそれぞれ、<div></div>で囲みます。

スライドする要素はimgタグでもHTML要素でもOKです。

<div class="bxslider">
  <div>slide 1</div>
  <div>slide 2</div>
  <div>slide 3</div>
  <div>slide 4</div>
  <div>slide 5</div>
</div>

3. bxsliderのイニシャライズ

bxsliderを初期化します。好みのカスタマイズはここに記載していきます。

<script>
 $(function(){
    $('.bxslider').bxSlider();
 });
</script>

See the Pen bxslider by mixtaro (@mixtaro) on CodePen.

レスポンシブ対応のカルーセル

bxsliderのカルーセルをレスポンシブに対応させるには以下のオプション項目を設定する必要があります。

slideWidth
maxSlides
minSlides

slideWidth

スライドの最大幅を指定。これより大きくなることはありません。指定がない場合は100%になります。

maxSlides / minSlides

表示するスライドの最大数（maxSlides）と最小数（minSlides）を指定します。ビューポートで指定するのではなくスライド枚数で指定することになります。

slideWidthに2000など大きい値を設定した場合、minSlidesの値がデフォルトになります。

レスポンシブでなく固定幅にしたい場合

オプションのresponsive値をfalseにします。bxsliderはデフォルトの状態でレスポンシブになっています。

responsive: false

bxsliderの自動再生

カルーセルスライダーを自動再生したい場合は以下のオプションを追加します。

<script>
  $(function(){
    $('.bxslider').bxSlider({
    auto: true;
    });
  });
</script>

bxsliderの縦スクロール

<script>
  $(function(){
    $('.bxslider').bxSlider({
    mode: 'vertical';
    });
  });
</script>

bxsliderのフェードイン・アウト

See the Pen bxslider -fade by mixtaro (@mixtaro) on CodePen.

スライドが切り替わりをフェードエフェクトはmodeプロパティをfadeに指定します。上記の例では自動再生にして、矢印アイコンは表示しない設定にしました。

エフェクトのスピードも少し調整しています。CSSを使えばもう少しアニメーションのカスタマイズができそうです。

<script>
$(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    auto: true,
    controls: false,
    speed:1000,
    pause:4000,
    });
  });
</script>

bxsliderで枠を消す方法

bxsliderでデフォルトの状態にはスライドに白い枠とドロップシャドウが設定されています。これを消したい時はCSSで消しちゃいましょう。

.bx-wrapper{

    /* 白い枠を消す */
    border: none;

    /* ドロップシャドウを消す */
    box-shadow: none;

}

bxsliderのサムネイル機能を使う方法

bxsliderでサムネイル付きのスライダーを設定する場合、方法は二つあります。

• メインスライダーとサムネ用スライダーのHTMLを用意する
• オプションにサムネを設定する

1. メインスライダーとサムネ用スライダーHTMLを用意する

See the Pen bxslider -thumbnail by mixtaro (@mixtaro) on CodePen.

メインのスライダーに以下のオプションを設定します。pagerCustomにサムネ用スライダーのクラスを指定します。

$(function(){
    $('.bxslider1').bxSlider({
      pagerCustom: '.bxslider2',
    });
});

2. bxsliderのオプションにサムネを設定する

二つ目はswitch文で条件分岐させる方法です。

See the Pen bxslider thumbnail2 by mixtaro (@mixtaro) on CodePen.

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '1';
      case 1:
        return '2';
      case 2:
        return '3';
      case 3:
        return '4';
      case 4:
        return '5';
    }
  }
});

どちらの場合もページャー用のスタイルシートは自分で設定する必要があります。

bxsliderのカスタマイズオプション

bxsliderで設定できるオプションはたくさん用意されていますのでここでは、よく使いそうな項目だけ抜粋しています。

bxsliderのオプション一覧

基本的なプロパティ

プロパティ	初期値	説明
mode	horizontal	スライドタイプ「'horizontal', 'vertical', 'fade'」から選択
speed	500	スライドのスピード（ミリ秒：1/1000）
slideMargin	0	スライド間のマージン幅
startSlide	0	何番目の要素からスライドをスタートするか、0から数える
randomStart	false	スライドをランダムで表示するか
slideSelector		スライド要素の指定
infiniteLoop	true	真偽値(boolean) アニメーションをループさせるかどうか
hideControlOnEnd	false	Nextを隠す infiniteLoopf:false の時のみ使用
easing		easingの種類 if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
captions	false	真偽値(boolean) 画像のtitle要素をcaptionとして表示するかどうか
ticker	false	真偽値(boolean) スライドをニュースティッカーのように表示する場合
tickerHover	false	真偽値(boolean) マウスオーバーした時に一時停止するかどうか
adaptiveHeight	false	真偽値(boolean) スライド要素の高さを動的にフィットさせるかどうか
adaptiveHeightSpeed	500	数値 adaptiveHeight:trueの時のみ transitionの時間
video	false	真偽値(boolean) スライドに動画を含むかどうか trueの場合 plugins/jquery.fitvids.js必要?
responsive	true	真偽値(boolean) スライド要素を自動リサイズするかどうか
useCSS	true	真偽値(boolean) 水平、垂直スライドのアニメーションでcssトランジョンを使うかどうか
preloadImages	visible	'all', 'visible' スライドに動画を含むかどうか
touchEnabled	true	真偽値(boolean) スワイプトランジョンを許可するかどうか
swipeThreshold	50	スライド遷移を実行するために、タッチでスワイプしたときに必要なピクセル数。注：touchEnabled: trueの場合のみ使用される。
oneToOneTouch	true	trueの場合、スワイプした指にフェードしないスライドが追従
preventDefaultSwipeX	true	trueの場合、タッチスクリーンは指のスワイプに伴ってX軸方向に移動しない
preventDefaultSwipeY	false	trueの場合、タッチスクリーンは指のスワイプに伴ってY軸方向に移動しない

peger機能

プロパティ	初期値	説明
pager	true	pager （真ん中の○○○●）を表示するかどうか
pagerType	full	'full', 'short' 「full」の場合、各スライドに対してページャーが生成されます。 'short' の場合、「1 / 5」のようなページャーになります。
pagerShortSeparator	/	pagerTypeがshortの時、区切り文字として使う
pagerSelector		ページャーを設定するために使用される要素。 デフォルトではページャーは bx-viewport に追加されます

コントロール機能

プロパティ	初期値	説明
controls	true	Prev,Next矢印を表示するかどうか
nextText	Next	次へボタンに使う文字列
prevText	Prev	戻るボタンに使う文字列
autoControls	false	trueの場合、「Start/Stop」を表示

自動機能

プロパティ	初期値	説明
auto	false	スライドアニメーションを自動再生するかどうか
pause	4000	次のアニメーションまでの間隔
autoStart	true	falseの場合はスタートボタンをクリックしてスタート
autoHover	false	スライダーにマウスホバーした場合、一時停止するかどうか

カルーセル機能

プロパティ	初期値	説明
minSlides	1	スライド時に表示させる画像の最小数
maxSlides	1	スライド時に表示させる画像の最大数
moveSlides	0	遷移するときに移動する画像の枚数
slideWidth	0	スライド間のマージン

こちらもおすすめスワイプ対応スライダーライブラリ

jQuery不要・モバイルファーストの軽量スライダー Swiper

スライダーSwiperの使い方と動かない時に確認すること

Swiperはスライダーやカルーセルが簡単に実装できるJavaScriptライブラリです。jQuery不要で軽量・高機能なためWebサイトで広く使われていますね。本記事ではSwiperの基本的な使い方 ...

設置が簡単、カスタマイズ豊富、jQueryプラグイン slick

カルーセルスライダーslickの使い方、カスタマイズのまとめ

ちょっと古いですがカルーセルスライダーが簡単に実装できるSlickを久しぶりに触る機会がありました。 slickはレスポンシブ設定が可能でスワイプにも対応しています。カルーセルのサイズ、アニメーション ...