WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > javascript > bxSliderの使い方と「オプション」によるカスタマイズ

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

[景品表示法に基づく表記] 本コンテンツにはプロモーションが含まれています。

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

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

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

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

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

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

bxSliderの使い方

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

bxSliderのダウンロード

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

bxSliderの内包物

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

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

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で1枚の画像の横幅を指定し、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というポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが2ヶ月程度でサクッと学べたので逆に経済的だった!(実際に私がオンラインスクールを受講して体感

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

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

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

まとめ

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

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


※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴:約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

Twitter @stand_4u_ をフォロー

新着記事