2013/03/27
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、
最近バージョンアップされ、機能もパワーアップされてました。
サイト自体もリニューアルされ、今風になっていました。
それに伴い、今回新しく記事にすることにしました。
以前の記事は以下になります。
コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」
今回のバージョンアップした点は以下になります。
・レスポンシブに対応
・スワイプが可能（スマートフォン）
・cssが付いているので、cssの設定が楽になった
・コントロールの画像等も付いている
・カルーセルの設定も変更に(プラグインで設定する)
今回もDEMOを作成しましたが、
レスポンシブになった箇所以外は、あまり以前のと変わってはいません。
それでは簡単にではありますが、使い方です。
bxSliderの使い方
まずは、プラグインサイトからダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider
次に、head部分に以下の記述をします。
|
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> |
そしてさらに
|
1 2 3 | $(document).ready(function(){ $('.slider').bxSlider(); }); |
とします。
あとは、htmlを、
|
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でお好みにして、
機能を追加したい場合は、オプションをつけて下さい。
一部のオプションを紹介します。
|
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の以下の部分、
|
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.ページャー、戻る・次へボタン付き
|
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.サムネイルのページャー付き,イージング効果
|
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.カルーセルスライダー
|
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になりました。)
正直カルーセルについては、あまりよくわかりませんでした。。。
思い通りにするためにはちょっと工夫が必要そうです。
とはいえ、スライダーとしては、
今一番と言っていいほど、お奨めです。
Author Profile
スターフィールド編集部
SHARE
