bxSliderの使い方と「オプション」によるカスタマイズ

2017年5月31日

初心者でも超簡単に設置できる、レスポンシブ・カルーセルに対応した世界一使いやすい画像スライダープラグイン「 bxSlider」の使い方と「オプション」によるカスタマイズを、説明書のように解説します。またbxSliderが「動かない時」の対処法も説明します。オプションは「見やすい表」にしてオプションの説明と記述方法と使い方をまとめています。

現在bxsliderと並んで、大人気で現在最もスタンダードな位置づけの脱jQueryなスライダー「swiper」の使い方を知りたい方はこちら

▶ Swiper V8の使い方「レスポンシブ等の具体例」とオプション解説

またbxsliderよりも使いやすいと、人気急上昇中の「slick」についての記事はこちら

▶ 「slick」の使い方とオプションによるカスタマイズ

bxSliderは使い方簡単！オプションが豊富でカルーセル・レスポンシブ対応！

bxSliderの特徴は、画像のスライドショーやカルーセルイメージを、初心者でも簡単に設置でき、豊富なオプションでカスタマイズがしやすく、軽量設計でユーザーも多くとても人気のあるjQueryプラグインです。

さらにレスポンシブデザインにも対応しているので、スマートフォンやタブレットなど、どんな画面幅にも合わせてサイズを自動調整してくれる優れものです！

bxSliderの使い方

まずはオプション設定の前に、基本的な使い方のおさらいです。

bxSliderのダウンロード

まずはbxSlider公式ダウンロードサイトから一式ダウンロードしてください。
bxSlider公式サイトの右上にある「Download」ボタンからダウンロードできます。

bxSliderの内包物

bxSliderの公式サイトよりダウンロードすると、以下のファイルが入っています。

この中で最低限必要なファイルは「jquery.bxslider.js」と「jquery.bxslider.css」の２つだけです。

bxSliderを使う為の最低限の記述

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

htmlのhead内に記述する内容です。まず最初に「jQuery」と「jquery.bxslider.js」と「jquery.bxslider.css」を読み込んだ上で、bxSliderを呼び出す為のjavascriptの記述を書きます。<script>タグの中で、上記の記述で呼び出して下さい。$('.bxslider')の部分は任意のクラスやIDを入れる事ができます。

HTMLの記述方法

<ul class="bxslider">
  <li><img src="img/img01.jpg" title="キャプション1"></li>
  <li><img src="img/img02.jpg" title="キャプション2"></li>
  <li><img src="img/img03.jpg" title="キャプション3"></li>
  <li><img src="img/img04.jpg" title="キャプション4"></li>
</ul>

リストのulタグに、さきほどbxSliderの呼び出し指定の際に記述した、任意のクラスやIDをつけます。ここでは「bxslider」というクラスにしています。そして、liの中にスライドしたい画像を入れます。スライドの数はいくつでもOKで、制限はありません。title="キャプション1"は任意で入れて下さい。オプション設定でキャプションを出力する事ができます。

ここまでが基本の記述で、これだけでbxSliderとして機能するようになります。

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

基本の設定が終わったら、オプションを指定してカスタマイズしていきましょう。bxSliderには豊富なオプションが用意されていますので、順番に解説していきます。

オプション項目	オプション説明	オプション記述方法
mode	スライド方法を設定「horizontal」横方向のスライド「vertical」縦方向のスライド「fade」フェードでの切り替え default: 'horizontal'	horizontal / vertical / fade
auto	自動スライドの設定 default: false	true / false
speed	default: 500	数字（例：1000）
pause	スライドしてから次のスライドまでの待ち時間の設定 default: 4000	数字（例：3000）
infiniteLoop	スライドをループさせるかどうかの設定 default: true	true / false
captions	画像にキャプションを表示する事ができます。タグのtitleプロパティ内に記述したものが表示されます。 default: false	true / false
responsive	レスポンシブに対応するかどうかの設定 default: true	true / false
touchEnabled	タッチスワイプを許可するかを設定 default: true	true / false
pager	ページ送りを追加するかどうかの設定 default: true	true / false
controls	前後のコントロールを追加するかどうかの設定。 default: true	true / false
nextText	nextのテキストを設定 default: 'Next'	任意のテキスト（例：次へ）
prevText	prevのテキストを設定 default: 'Prev'	任意のテキスト（例：前へ）
nextSelector	「nextボタン」を自分で用意する場合にjQueryセレクタで指定 ※指定するとデフォルトのボタンは表示されなくなる	任意のクラスやID（例：'#next-btn'）
prevSelector	「prevボタン」を自分で用意する場合にjQueryセレクタで指定 ※指定するとデフォルトのボタンは表示されなくなる	任意のクラスやID（例：'#prev-btn'）
useCSS	スライドにCSSアニメーションを使用するかどうかの設定 default: true	true / false
easing	スライドのイージングの設定 default:なし	useCSSがtrueの場合 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)' useCSSがfalseの場合 'swing', 'linear'
autoDirection	スライドの方向 default: 'next'	'next', 'prev'
autoHover	スライドをホバーした時に、スライドを一時的に止めるかどうかの設定 default: false	true / false
minSlides	（カルーセル設定）一度に表示させる最小数を設定 default:なし	数字（例：1）
maxSlides	（カルーセル設定）一度に表示させる最大数を設定 default:なし	数字（例：4）
moveSlides	（カルーセル設定）一度のスライド時に移動するスライド数	数字（例：4）
slideWidth	各スライドの幅を指定	数字（例：400）

オプションの記述方法

<script>
$(document).ready(function(){
 $('.bxslider').bxSlider({
 auto: true,
 slideWidth: 640,
 autoDirection:'prev',
 minSlides: 3
});
</script>

上記はオプション記述例です。前述した基本設定の$('.bxslider').bxSlider()のカッコ「()」の中で、オブジェクト形式で記述します。

オブジェクト形式の基本記述

{
プロパティ名1: 値1,
プロパティ名2: 値2,
プロパティ名3: 値3
}

「{}」の中で、プロパティと値をコロン「:」で区切り、さらにそれぞれをカンマ「,」によって区切ります。注意点として「最後にカンマをつけてはいけない」というのが決まりです。最後にカンマがついていたり、途中にカンマが抜けていたりすると、bxsliderが動かない原因になりますので、注意して下さい。

bxSliderのカルーセルに必要なオプション設定

複数枚の画像を常に表示するタイプのカルーセルにカスタマイズしたいの場合に最低必要なオプションは、「slideWidth、minSlides、maxSlides、moveSlides」です。

slideWidthで１枚の画像の横幅を指定し、minSlidesで最低限表示したい画像枚数を指定、maxSlidesで最大表示したい画像枚数を指定、moveSlidesでスライドする際に一度に動く画像の枚数を指定します。minSlidesやmaxSlidesは画面幅が可変の場合に効果を発揮する設定で、固定幅の画面の場合は、両者に同じ数値を入れると良いでしょう。

※カルーセル時の注意点として「mode」はデフォルトのママにしてください。fadeに設定していると複数枚のカルーセル表示にはなりません。

左右の矢印をカスタマイズしたい場合

左右の矢印はダウンロードしたままの状態では、グレーの丸い矢印画像が設定されています。これを変更する方法として、この画像自体を修正したり、cssで変更する方法もあるのですが、標準で用意されている変更オプションがあるので、その方法を解説します。

左右矢印変更の為に用意されたオプションが「nextSelector、prevSelector」です。変更手順としては、新たな画像を用意し、htmlとcssで好きな場所に配置し、classやIDを付与しておきます。そのclassやIDを、前述したオプションでそれぞれ、以下の例のように指定します。

nextSelector:'#next-btn',
prevSelector:'#prev-btn',

すると指定したID内にそれぞれ「<a class="bx-prev" href=""></a>、<a class="bx-next" href=""></a>」というソースが自動的に書き出されるので、このaタグと画像がとうまく重なるように、cssで制御して下さい。

矢印を背景画像で処理したい場合は、nextTextとprevTextのオプションに空欄設定をする事で、デフォルトで表示される文字を消す必要があります。

nextText:'',
prevText:'',

矢印画像差し替えサンプルhtml

画像を画面幅いっぱいに広げたスライドショーの場合

横幅いっぱいの一枚画像がスライドしていくようなデザインにしたい場合、slideWidthなどのオプションを指定せず、cssで制御します。（modeをfadeにして、speedをゆっくりにすると雰囲気のあるスライドになるかもしれません。）

標準で設定されている「白い枠線」を消すために、自動生成された「.bx-wrapper」に対して、以下のようにcssを上書きします。

.bx-wrapper {
  margin: 0 !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

つぎにそれぞれのスライド画像の横幅をcssで100%に設定します。

.bxslider img{
  width: 100% !important;
  height: auto !important;
}

あとは必要に応じて、前述したように矢印画像を差し替えたり、丸ボタンのページ送りを画像の中に入れたりなどカスタマイズしてみて下さい。

画面幅いっぱいのスライドショーサンプル

bxsliderが「動かない時」の対処法

bxsliderが動かない時はあせらずいくつか確認して下さい。

jquery.bxSlider.jsやjquery.bxslider.cssの読み込み時のファイルパスが間違っていると動かない
jquery.bxSlider.jsがjQueryの読み込みより先になっていると動かない
jQueryのバージョンによっては動かない時がある、公式では「jquery/1.8.2/jquery.min.js」のバージョンを読んでいるようです
オプション複数設定時に、「,」が抜けていると動かない、もしくは最後のオプションの後に「,」が入っていると動かない
複数枚同時に表示するカルーセルの場合、「mode」を「fade」にしていると動かないので「horizontal」にする

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

まとめ

以上、世界一使いやすいjQueryのスライダープラグインbxSliderの使い方と「オプション」によるカスタマイズを解説しました。プラグインは手っ取り早く利用するには本当に手軽で便利です。

ただ汎用性やデザインの自由度を上げたい時や、シンプルなスライドショーだけを実装した時など、プラグインを使わず自分でjQueryを記述してスライドショーを作る事もできます。「Jqueryでスライドショーの作り方（デザイナーでも出来る自作編）」「Jqueryでクロスフェードスライドショーの作り方（デザイナーでも出来る自作編）」この記事で自作方法を丁寧に説明していますので、参考にして一度自作しておくと、使い回しができるのでとても便利でオススメです。