jQuery レスポンシブ・スライダー bxSlider

CATEGORY: jQuery | TAG: フォトギャラリー, プラグイン, レスポンシブ

2014年5月18日

レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。

bxSlider のダウンロードとインストール

bxSlider のサイトの右上の「Download」からファイルをダウンロード。

ダウンロードしたファイルを展開すると以下のようになっている。

bxSlider-02

images：コントロール類やローディングの画像
plugins：オプションで使用する「jquery.easing.1.3.js（イージング）」と「jquery.fitvids.js（レスポンシブ・ビデオ）」

基本的なファイル（jquery.bxslider.css, jquery.bxslider.min.js ）及び画像を配置して、必要なファイルを読み込む。（ファイルへのパスは適宜自分の環境に合わせる）

head での CSS ファイル（jquery.bxslider.css）の読み込み

<head>
...中略...
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>

jQuery 本体（必須）と「jquery.bxslider.min.js」の読み込み（head 内で読み込んでもOK）

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><!-- 必須 -->
<script src="js/jquery.bxslider.min.js"></script>
</body>
</html>

bxSlider のサイトに紹介されているファイルの読み込みの例（head 内）

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

画像の「images フォルダ」はダウンロードした際の位置関係を CSS ファイルと同じにするか、中には2つしか画像がないので他の画像と同じフォルダに格納して CSS で画像へのパス（background）の指定（数箇所ある）を変更する。

jquery.bxslider.css でのローダー画像の指定の例

/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url(images/bx_loader.gif) center center no-repeat #fff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* 環境に合わせて変更（この他にも数箇所あるのでそれらも変更） */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url(../images/bx_loader.gif) center center no-repeat #fff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

HTML の記述

<ul class=”bxslider”> の中の <li> と </li> 要素でスライドする画像を囲んでマークアップ

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

bxSlider の呼び出し

以下のように jQuery を記述して動作すれば基本的なインストールは完了。（オプションを指定していないので自動的にスライドは始まらない）

Sample 1

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

この例では HTML のマークアップで ul 要素にクラス「bxslider」を指定して、その要素に対して「.bxSlider()」を呼び出している。

「.bxSlider()」を呼び出す要素（スライドを囲む要素）は ul 要素の他に div 要素でもOK。

また、 ul 要素（div 要素）に指定するクラス（または ID）は特に決まりはなく何でもよく、それにあわせて JQuery の記述を変更する。

以下のように div 要素でマークアップして

<div id="top_photo">
  <div><img src="/images/pic1.jpg" /></div>
  <div><img src="/images/pic2.jpg" /></div>
  <div><img src="/images/pic3.jpg" /></div>
  <div><img src="/images/pic4.jpg" /></div>
</div>

以下のように呼び出すこともできる。

<script>
$(document).ready(function(){
  $('#top_photo').bxSlider();
});
</script>

画像がずれる問題

デフォルトのモード（horizontal）の場合は問題ないが、他のモード（vertical, fade）を指定した際に、画像の位置がずれる場合がある。

これを解決する方法の１つは以下のように「.bxSlider()」を呼び出す要素の padding （または padding-left）を「0」にする。

モードを「vertical」にした場合、1つ前の画像の一部が表示されてしまう場合は margin も「0」にする。

ul.bxslider {
  padding: 0;   /* または padding-left: 0; */
  margin: 0;
}

別の解決方法は <ul> と <li> 要素でのマークアップではなく、<div> 要素でマークアップする。個人的にはこちらがお勧め（ul 要素のパディングやマージンを 0 にする必要がなくなるのと、スライド周りのスタイルの指定がしやすい）。

おそらく原因は使用している CSS の ul 要素の設定によるものと思われる。

<div class="bxslider">
  <div><img src="/images/pic1.jpg" /></div>
  <div><img src="/images/pic2.jpg" /></div>
  <div><img src="/images/pic3.jpg" /></div>
  <div><img src="/images/pic4.jpg" /></div>
</div>

オプション（カスタマイズ）

いろいろなオプションがあるので、それらを指定してカスタマイズが可能。

以下は

スライドショーを自動再生
3.5秒ポーズ（停止して次のスライド）
画像の切り替えを横のスライドではなく垂直方向のスライドで
イージングに「’ease-in-out’」を指定

する例

Sample 2

$('#top_bxslider').bxSlider({
    auto:true,
    pause:3500,
    mode: 'vertical',
    easing:'ease-in-out'
});

以下はスライドを２枚ずつカルーセルで表示する例（slideWidth の値で画像は縮小・拡大される）

$('#top_bxslider').bxSlider({
    auto:true,
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 470,
    slideMargin: 10
});

Sample 3

以下はコントロール類をクリックするとスライドは終了してしまうので、自動的に再開する例。

onSlideAfter というコールバックのオプションに「startAuto」という関数（Public methods）を指定

var slider = $('#top_bxslider').bxSlider({
  auto:true,
  speed:500,
  pause:3500,
  onSlideAfter: function () { slider.startAuto(); }
});

Sample 4

以下は乱数を使ってモード（mode）をランダムに変更する例。

var rand = Math.floor( Math.random() * 3 );
var modes = ['vertical', 'horizontal', 'fade'];
var bx_mode = modes[rand];

$('#top_bxslider').bxSlider({
  auto:true,
  speed:500,
  pause:3500,
  mode: bx_mode
});

Sample 5

以下はキャプションを表示する例。「captions: true」を指定。

$('#slider5_2').bxSlider({
  auto:true,
  pause:3500,
  captions: true
});

表示するキャプションは img 要素の title 属性に記述。

<div id="slider5_2">
      <div><img src="/images/pic1.jpg" title="ホテル"  alt=""></div>
      <div><img src="/images/pic2.jpg" title="ビーチ"  alt=""></div>
      <div><img src="/images/pic3.jpg" title="海がめ"  alt=""></div>
      <div><img src="/images/pic4.jpg" title="子供"  alt=""></div>     
</div>

Sample 5_2

キャプションの背景色や文字色を変更するには「jquery.bxslider.css」の以下の部分をカスタマイズするか、独自の CSS で設定を上書きする。

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666\9;
  background: rgba(80, 80, 80, 0.75);   /* キャプションの背景 */
  width: 100%;
}

.bx-wrapper .bx-caption span {
  color: #fff;
  color: #F7CECE;   /* 文字色を変更 */
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
  text-align: center;    /* キャプションを中央寄せ */
}

Options

オプションの例（一部抜粋）
option	指定できる値（意味）	デフォルト
mode	‘horizontal’, ‘vertical’, ‘fade’	‘horizontal’
speed	integer（整数単位はミリ秒）	500
slideMargin	integer（整数ピクセル）スライド間の距離（マージン）	0
startSlide	integer（整数）最初に表示するスライドのインデックス（0から始まる）	0
randomStart	boolean (true / false) スライドをランダムに表示するかどうか	false
infiniteLoop	boolean (true / false) 無限に繰り返すかどうか	true
captions	boolean (true / false) キャプションを表示するかどうか。キャプションは img 要素の title 属性に記述	false
ticker	boolean (true / false) 継続的にスライドする（動き続ける）ティッカーモード	false
video	boolean (true / false) スライドにビデオが含まれる場合は「true」に設定してダウンロードした「plugins」フォルダの「jquery.fitvids.js」も読み込むようにする。	false
responsive	boolean (true / false)　レスポンシブ対応にするかどうか	true
useCSS	boolean (true / false)　 true の場合、CSS の transitions が使われ、 false の場合は、jQuery animate() が使われる。	true
pager	boolean (true / false) ページャー（丸いアイコン）の表示	true
controls	boolean (true / false) コントロール（Next, Prev）を表示するかどうか	true
autoControls	boolean (true / false) true の場合 Stop, Start のコントロールが表示される	false
autoControlsCombine	boolean (true / false) true の場合スライドが実行されていれば Stop のみが表示され、停止しているときは Start のみが表示される	false
auto	boolean (true / false) 自動的に開始するかどうか	false
pause	integer スライドの間隔（ミリ秒で指定）	4000
autoStart	boolean (true / false) これはよくわからない。自動的に開始するには「auto」を「true」すれば良いみたいだが。。。「auto」を「true」にして、これを「false」にすると自動的には開始されない。。。	true
autoHover	boolean (true / false) true の場合、スライダーにマウスオーバーすると一時停止する	false
minSlides	integer（整数）カルーセル表示の際に表示するスライドの最低数	1
maxSlides	integer（整数）カルーセル表示の際に表示するスライドの最大数	1
slideWidth	integer（整数）カルーセル表示の際のそれぞれのスライドの幅（ピクセル）	0

easing オプション

easing オプションは以下を指定可能（デフォルトは null）

useCSS が「true」の場合

CSS の transition-timing-function プロパティの値が指定可能
‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’
（参考：CSS transition の使用（MDN)）

useCSS が「false」の場合

jQuery animate() のデフォルトの’swing’, ‘linear’ か、ダウンロードした plugins フォルダ内の jquery.easing.1.3.js を読み込む等してそれらの値（jquery.easing.1.3.js に記載されている）を指定できる。

CSS（カスタマイズ）

jquery.bxslider.css を変更することでスタイルを変更することが可能。以下は変更例。

Sample 6

.bx-wrapper .bx-viewport {
  /* -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border:  5px solid #fff;
  left: -5px;
  background: #fff; */
  /*上記をコメントアウトしてスライド周りのシャドウとボーダーを削除*/

  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
      -ms-transform: translatez(0);
      -o-transform: translatez(0);
      transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -35px; /*pager の位置の変更 */
  width: 100%;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #ccc;  /*ページャーの色の変更*/
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #999;  /**ページャーの色（フーバー、アクティブ）の変更*/
}

/*以下は Next, Prev の画像を通常は非表示にしてフーバー時に表示するように変更*/

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;  
  z-index: 50; 
  display: none; /*追加*/
}
/*追加*/
.bx-wrapper:hover .bx-controls-direction a {
  display: block;
}

カスタマイズ例

Sample 7

Start, Stop のコントロールを表示（autoControls: true）
スライドが実行されていれば Stop のみを表示し、停止しているときは Start のみを表示（autoControlsCombine: true）
スライダーにマウスオーバーすると一時停止（autoHover: true）
モードとイージングはランダムに選択（あまり実用的ではないが）
Next, Prev はスライダーにマウスオーバーした時に表示（ページャーにマウスオーバーした時は表示しないように jQuery で処理）

jQuery(function($){
  
  var rand = Math.floor( Math.random() * 3 );
  var modes = ['fade', 'horizontal', 'vertical',];
  var bx_mode = modes[rand];
  var easings = ['swing', 'easeInOutExpo' , 'easeOutBounce'];
  var easing = easings[rand];
    
  var slider = $('#slider6').bxSlider({
    auto:true,
    speed:500,
    pause:3500,
    useCSS:false,  //jQuery のイージングを使用
    mode: bx_mode,
    easing: easing,
    autoControls: true,
    autoControlsCombine: true,
    autoHover: true,
    onSlideAfter: function () { slider.startAuto(); }
  });
  
  //スライダー部分にマウスオーバーしたときの処理（Next, Prev を表示）
    $('.bx-wrapper .bx-viewport').hover(function() {
    $('.bx-wrapper .bx-controls-direction a').css('display', 'block');
  }, function() {
    $('.bx-wrapper .bx-controls-direction a').css('display', 'none');
  });

  //Next, Prev にマウスオーバーした際にそれらがちらつかないように
    $('.bx-wrapper .bx-controls-direction a').hover(function() {
    $('.bx-wrapper .bx-controls-direction a').css('display', 'block');
  }, function() {
    /* 何もしない*/
  });

});

bxSlider の CSS より後に読み込ませる CSS。

CSS

/* デフォルトの周りの枠を表示しない */
.bx-wrapper .bx-viewport {
  box-shadow: none;
  border: none;
  background: none;
}

/* ページャーやコントロール（start, stop）の位置の調整 */
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  bottom: -35px;
}

/* ページャーのスタイル */
.bx-wrapper .bx-pager.bx-default-pager a {
  background: none;
  border: 2px solid #aaa;
  width: 6px;
  height: 6px;
  margin: 0 5px;
  outline: 0;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: rgba(0,0,0,.2);
}

/* Next, Prev は非表示にしておき、jQuery でホバー時に表示 */
.bx-wrapper .bx-controls-direction a {
  display: none;
}

/* start, stop のコントロールのスタイルの調整 */
.bx-wrapper .bx-controls-auto .bx-start, .bx-wrapper .bx-controls-auto .bx-stop {
  opacity: .5; 
}

/* ページャーを中心に表示するための調整 */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: center;
  width: 100%;
}

デバイスにより画像サイズを変える場合

スマートフォンなどでは小さいサイズの画像を読み込ませ、PC などでは大きなサイズの画像を読み込ませる例。

大きな画像のサイズ：940 x 360
小さな画像のサイズ：640 x 360

＜サイズについて＞
最初は以下のように同じ比率の画像を用意して試してみたが、この例の方法だと、IE では小さいサイズの画像の高さが大きな画像を読み込んだときにも適用されてしまったので、上記のように大きな画像と小さな画像の高さを同じものを用意した。

大きな画像のサイズ：940 x 360
小さな画像のサイズ：640 x 245

画像は同じフォルダに配置して、小さい画像には画像名の最後に「_small」を付け、HTML の記述では小さな画像を指定。

フォルダの位置や画像名は正規表現の指定次第でいろいろとやり方はあると思う。これは一例。

HTML

<div id="top_bxslider">
  <div><img src="/images/top/top_photo_01_small.jpg" alt=""></div>
  <div><img src="/images/top/top_photo_02_small.jpg" alt=""></div>
  <div><img src="/images/top/top_photo_03_small.jpg" alt=""></div>
  <div><img src="/images/top/top_photo_04_small.jpg" alt=""></div>
</div>

以下の jQuery を記述。

この例の場合、ウィンドウ幅が 600px より大きい場合は大きな画像を読み込ませる。

$(window).innerWidth() でウィンドウの横幅を取得
Android 2.x の場合はウィンドウ幅をうまく取得できないので Android 2.x は除外
画像の src 属性を replace() を使って書き換え
またリサイズされた場合も考慮するには resize() を使って src 属性を書き換え

jQuery

jQuery(document).ready(function($) {

      //画像の入れ替え
  var sw = $(window).innerWidth();
  if(sw > 600 && navigator.userAgent.indexOf('Android 2') == -1){
    $("#top_bxslider img").each(function(){
      $(this).attr("src",$(this).attr("src").replace(/^(.+)_small(\.[a-z]+)$/, "$1$2"));
    });
  }

  //この部分はリサイズされた場合の処理（オプション）
  var timer = false;
  $(window).resize(function(){
    var w = $(window).width();
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(w > 600 && navigator.userAgent.indexOf('Android 2') == -1) {
        $("#top_bxslider img").each(function(){
          $(this).attr("src",$(this).attr("src").replace(/^(.+)_small(\.[a-z]+)$/, "$1$2"));
        });
      }
    }, 200);
  });

  var slider = $('#top_bxslider').bxSlider({
    auto:true,
    speed:500,
    pause:3500,
    easing:'ease-in-out',
    autoHover: true,
    onSlideAfter: function () {
      slider.startAuto();
    }
  });
});

IE での不思議な現象

以下のような環境で、IE11 では時々画像がうまく読み込めないのか画像のロード中のアイコンが表示され続けてしまう現象が発生。IE 以外のブラウザでは問題なし。

WordPress の独自テーマに bxSlider をインストール（WordPress は関係ないと思う）
上記の jQuery の記述をフッター部分（footer.php）に記述

現象

特に問題なく表示される場合もある
リフレッシュ（再読み込み）するとかなり高い確率で画像のロード中のアイコンが表示され続ける
画像のロード中のアイコンが表示され続ける場合　Ctrl + F5（強制リロード）をすると表示される
または、コンソール（F12）を押すと表示される

解決策

bxSlilder の処理を別の JavaScript ファイル（外部ファイル）に移す
画像の入れ替えとリサイズされた場合の処理の部分はフッター部分に残す（記述）

画像の入れ替え処理が終わらないうちに bxSlilder の処理が行われてしまうためか。。。？

以下はレスポンシブ対応で多機能なスライダープラグイン Slider Revolution（価格：$12）の使い方等についての記事へのリンク。

Slider Revolution / jQuery スライダープラグイン

Web Design Leaves