以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、
最近バージョンアップされ、機能もパワーアップされてました。
サイト自体もリニューアルされ、今風になっていました。

それに伴い、今回新しく記事にすることにしました。

以前の記事は以下になります。

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

今回のバージョンアップした点は以下になります。
・レスポンシブに対応
・スワイプが可能（スマートフォン）
・cssが付いているので、cssの設定が楽になった
・コントロールの画像等も付いている
・カルーセルの設定も変更に(プラグインで設定する)

今回もDEMOを作成しましたが、
レスポンシブになった箇所以外は、あまり以前のと変わってはいません。

DEMO

それでは簡単にではありますが、使い方です。

bxSliderの使い方

まずは、プラグインサイトからダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider

次に、head部分に以下の記述をします。

XHTML

<link type="text/css" href="css/jquery.bxslider.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script>

1 2 3

<link type="text/css" href="css/jquery.bxslider.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script>

そしてさらに

JavaScript

$(document).ready(function(){ $('.slider').bxSlider(); });

1 2 3

$(document).ready(function(){   $('.slider').bxSlider(); });

とします。

あとは、htmlを、

XHTML

<ul class="slider"> <li><img src="images/sample1.jpg" /></li> <li><img src="images/sample2.jpg" /></li> <li><img src="images/sample3.jpg" /></li> <li><img src="images/sample4.jpg" /></li> </ul>

1 2 3 4 5 6

<ul class="slider">   <li><img src="images/sample1.jpg" /></li>   <li><img src="images/sample2.jpg" /></li>   <li><img src="images/sample3.jpg" /></li>   <li><img src="images/sample4.jpg" /></li> </ul>

とすれば基本的にはOKです！

あとは細かい調整はcssでお好みにして、
機能を追加したい場合は、オプションをつけて下さい。

一部のオプションを紹介します。

JavaScript

mode: 'horizontal' //スライドのエフェクト　'horizontal', 'vertical', 'fade' speed: 500　//スライドのアニメーションの時間 slideMargin: 0 //スライドとスライドのマージン startSlide: 0 //初めのスライドの指定 randomStart: false //スライドの初めをランダムに slideSelector: '' //スライドのセレクタを指定 infiniteLoop: true //ループさせるか否か hideControlOnEnd: false //スライドが最後の時に、次へのリンクを消すか否か easing: null //イージングの設定※easingのプラグインが必要 captions: false //キャプションの設定 adaptiveHeight: false //スライドの高さが違う場合、それぞれ調節して合わせるかどうか touchEnabled: true //スワイプできるようにするか否か（スマートフォン） pager: true //ページャーの有無 buildPager: null //サムネイルページャーの指定 controls: true //次へ、前へ等のコントロールの有無 nextText: 'Next' //次へのテキスト prevText: 'Prev' //前へのテキスト autoControls: false //自動、ストップボタンの有無 startText: 'Start' //自動ボタンのテキスト stopText: 'Stop' //ストップボタンのテキスト auto: false //自動スタート再生さるかいなか pause: 4000 //スライドの切り替えの間 カルーセルの場合 minSlides: 1 //最低限表示する数 maxSlides: 1 //マックスで表示する数 moveSlides: 0 //スライドをどのくらいの数を動かすか slideWidth: 0 //ひとつの要素の幅を指定

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

mode: 'horizontal' //スライドのエフェクト　'horizontal', 'vertical', 'fade' speed: 500　//スライドのアニメーションの時間 slideMargin: 0 //スライドとスライドのマージン startSlide: 0 //初めのスライドの指定 randomStart: false //スライドの初めをランダムに slideSelector: '' //スライドのセレクタを指定 infiniteLoop: true //ループさせるか否か hideControlOnEnd: false //スライドが最後の時に、次へのリンクを消すか否か easing: null //イージングの設定※easingのプラグインが必要 captions: false //キャプションの設定 adaptiveHeight: false //スライドの高さが違う場合、それぞれ調節して合わせるかどうか touchEnabled: true //スワイプできるようにするか否か（スマートフォン）   pager: true //ページャーの有無 buildPager: null //サムネイルページャーの指定   controls: true //次へ、前へ等のコントロールの有無 nextText: 'Next' //次へのテキスト prevText: 'Prev' //前へのテキスト autoControls: false //自動、ストップボタンの有無 startText: 'Start' //自動ボタンのテキスト stopText: 'Stop' //ストップボタンのテキスト auto: false //自動スタート再生さるかいなか pause: 4000 //スライドの切り替えの間   カルーセルの場合 minSlides: 1 //最低限表示する数 maxSlides: 1 //マックスで表示する数 moveSlides: 0 //スライドをどのくらいの数を動かすか slideWidth: 0 //ひとつの要素の幅を指定

もっと知りたい方は、
こちらをどうぞ！

 

一応DEMOの設定を紹介させて頂きます。

今回cssがあることで、特に設定しなくてもいいのですが、
余計なcssがあったりもします。
DEMOではそのままなんですが、スライダーの枠にシャドウがかかっています。
これはデザイン上いらないことも多いと思うので、
その場合、jquery.bxslider.cssの以下の部分、

CSS

.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: solid #fff 5px; left: -5px; background: #fff; }

1 2 3 4 5 6 7 8

.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: solid #fff 5px; left: -5px; background: #fff; }

を削除か調整すればOKです。

 

1.ページャー、戻る・次へボタン付き

JavaScript

$(document).ready(function(){ $('#slider').bxSlider({ auto: true, pause: 5000, speed: 1000, mode: 'horizontal', pager:true }); });

1 2 3 4 5 6 7 8 9

$(document).ready(function(){     $('#slider').bxSlider({ auto: true, pause: 5000, speed: 1000, mode: 'horizontal', pager:true });   });

 

2.サムネイルのページャー付き,イージング効果

JavaScript

$(function(){ var slider = $('#slider2').bxSlider({ auto: true, pause: 5000, speed: 1000, mode: 'horizontal', pager: true, easing: 'easeOutBounce', buildPager: function(slideIndex){ switch (slideIndex){ case 0: return '<img src="sample1.jpg" width="90" />'; case 1: return '<img src="sample2.jpg" width="90" />'; case 2: return '<img src="sample3.jpg" width="90" />'; case 3: return '<img src="sample4.jpg" width="90" />'; } } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$(function(){   var slider = $('#slider2').bxSlider({ auto: true, pause: 5000, speed: 1000, mode: 'horizontal', pager: true, easing: 'easeOutBounce', buildPager: function(slideIndex){       switch (slideIndex){         case 0:           return '<img src="sample1.jpg" width="90" />';         case 1:           return '<img src="sample2.jpg" width="90" />';         case 2:           return '<img src="sample3.jpg" width="90" />';         case 3:           return '<img src="sample4.jpg" width="90" />';       }     } }); });

 

3.カルーセルスライダー

JavaScript

$(document).ready(function(){ $('#slider3').bxSlider({ auto: true, pause: 5000, speed: 1000, pager: true, slideWidth: 300, minSlides: 3, maxSlides: 2, moveSlides: 1, slideMargin: 20 }); });

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function(){     $('#slider3').bxSlider({ auto: true, pause: 5000, speed: 1000, pager: true, slideWidth: 300,     minSlides: 3,     maxSlides: 2,     moveSlides: 1,     slideMargin: 20 });   });

カルーセルスライダーの場合、

slideWidth
minSlides
maxSlides

の設定は必須だそうです。

そしてカルーセルスライダーの横幅は、
親の要素のwidthか、slideWidth × maxSlidesとなるようです。

上記の場合は、600pxになるはずですが、620pxになっています。
slideMarginの値も関係あるようです。
(10にしたら、610pxになりました。)

正直カルーセルについては、あまりよくわかりませんでした。。。
思い通りにするためにはちょっと工夫が必要そうです。

 

とはいえ、スライダーとしては、
今一番と言っていいほど、お奨めです。