2012/03/22
コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」
2013.03.27
新しいverがいつの間にか公開されていたようで、新しく記事にしました。
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた
webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。
プラグインのダウンロードはこちらから
jQuery content slider carousel image slideshow | bxSlider
こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。
まずはDEMOをご覧下さい
基本的な使い方としては、
|
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script> |
を読み込み、head部分の箇所に
|
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function(){ $('#slider').bxSlider(); }); </script> |
でOKです。
後ほどでてきますが、イージング効果を使用したい場合、
さらに、
|
1 2 | <script type="text/javascript" src="js/jquery.easing.1.3.js"> </script> |
を読み込む必要があります。
基本的なHTMLは、
|
1 2 3 4 5 6 | <ul id="slider1"> <li>Slide one content</li> <li>Slide two content</li> <li>Slide three content</li> <li>And so on...</li> </ul> |
だけです。
div要素でも可能なので、
コンテンツ毎動かすことができます。
DEMOの説明をさせていただきます。
1.ページャー、戻る・次へボタン付き
まず、head部分、
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> $(document).ready(function(){ $('#slider').bxSlider({ auto: true, //自動再生 pause: 5000, //静止時間 speed: 1000, //エフェクトのスピード mode: 'horizontal', //エフェクトの種類 pager:true, //ページャーの有無 prevText: '<', //前へのテキスト nextText: '>' //次へのテキスト }); }); </script> |
切り替わりのエフェクトは全部で、横スライド、縦スライド、フェイドの3パターンしかありません。
しかし、次のイージング効果を使用すればかなりのパターンになります。
2.サムネイルのページャー付き,イージング効果
イージング効果については、 http://gsgd.co.uk/sandbox/jquery/easing/で動きが見れます。
Javascript
|
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 31 | <script type="text/javascript"> $(function(){ // assign the slider to a variable var slider = $('#slider2').bxSlider({ auto: true, pause: 5000, speed: 1000, mode: 'horizontal', prevText: '<', nextText: '>', pager: true, easing: 'easeOutBounce', //イージングの効果 //サムネイルの設定 buildPager: function(slideIndex){ switch (slideIndex){ case 0: return '<a href="" class="thumb"><img src="sample1.jpg" width="90" /></a>'; case 1: return '<a href="" class="thumb"><img src="sample2.jpg" width="90" /></a>'; case 2: return '<a href="" class="thumb"><img src="sample3.jpg" width="90" /></a>'; case 3: return '<a href="" class="thumb"><img src="sample4.jpg" width="90" /></a>'; } } }); }); </script> |
3.カルーセルスライダー
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> $(document).ready(function(){ $('#slider3').bxSlider({ auto: true, pause: 5000, speed: 1000, pager: true, displaySlideQty: 3, //一画面に表示する数 moveSlideQty: 1, //移動時にずれる数 prevText: '<', nextText: '>' }); }); </script> |
ここで気をつけたいのは、
カルーセルの横幅が、
displaySlideQtyで設定した数値×liの要素のwidthを設定した数値
になることです。
デモでは、liの要素のwidthを320pxに設定しているので、960pxになっています。
ですのでカルーセルの場合、CSSで調整が必要になってきそうです。
さらに言うと、下にでてくるページ数はliの数になります。
プラグインのダウンロードはこちらから
jQuery content slider carousel image slideshow | bxSlider
3つ合わせたＨＴＭＬとＣＳＳです。
ＨＴＭＬ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <h3>1.ページャー、戻る・次へボタン付き</h3> <div class="bg_img"><ul id="slider" class="slider"> <li class="slide1"><a href="">横浜の赤レンガ倉庫</a></li> <li class="slide2"><a href="">Title , Link , or Desciption</a></li> <li class="slide3"><a href="">Title , Link , or Desciption</a></li> <li class="slide4"><a href="">Title , Link , or Desciption</a></li> </ul></div> <h3>2.サムネイルのページャー付き,イージング効果</h3> <div class="bg_img"><ul id="slider2" class="slider"> <li class="slide1"></li> <li class="slide2"></li> <li class="slide3"></li> <li class="slide4"></li> </ul></div> <h3>3.カルーセルスライダー</h3> <div class="bg_img3"><ul id="slider3" class="slider"> <li class="slide1"><a href="" class="thumb"><img src="sample1.jpg" width="160" /></a></li> <li class="slide2"><a href="" class="thumb"><img src="sample2.jpg" width="160" /></a></li> <li class="slide3"><a href="" class="thumb"><img src="sample3.jpg" width="160" /></a></li> <li class="slide4"><a href="" class="thumb"><img src="sample4.jpg" width="160" /></a></li> </ul></div> |
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | .bg_img { width: 100%; max-width: 960px; margin: 0 auto 150px; } .bg_img .bx-wrapper { height: 100%; } .bx-window { margin-bottom: 10px; } #slider li a { padding: 30px 0 0 40px; font-size: 24px; display: block; color: #ffffff; text-decoration: none; text-shadow: 1px 1px 2px #333333; } .slider { width: 100%; margin: 0px auto; } /* 1.2のスライダー部分 */ .bg_img .slider li { width: 100%; background-repeat: no-repeat; background-position: left center; height: 300px; } .bg_img .slider li.slide1 { background-image: url(../sample1.jpg); } .bg_img .slider li.slide2 { background-image: url(../sample2.jpg); } .bg_img .slider li.slide3 { background-image: url(../sample3.jpg); } .bg_img .slider li.slide4 { background-image: url(../sample4.jpg); } /* ページャー部分 */ .bx-pager { text-align: center; } .bx-pager a { margin-right: 10px; border: 1px solid #dddddd; padding: 3px 5px; color: #333333; text-decoration: none; } .bx-pager a.pager-active { color: #ffffff; background-color: #333; } /* 前へ、次へのボタン */ .bx-prev,.bx-next { position: absolute; font-size: 36px; text-decoration: none !important; color: #ffffff !important; text-shadow: 1px 1px 2px #333333; } .bx-prev { left: 10px; top: 40%; } .bx-next { right: 10px; top: 40%; } .bx-pager a.thumb { border: none; padding:0; background-color: none; line-height: 0; overflow: hidden; display: inline-block; } .bx-pager a img { border: 1px solid #dddddd; padding:0; text-decoration: none; } .bx-pager a.pager-active img { color: #ffffff; border: 1px solid #f00; } /* 3.カルーセルスライダー */ .bg_img3 .bx-wrapper { width: inherit; margin-bottom: 50px; } #slider3 li { width: 320px; text-align: center; } |
Author Profile
スターフィールド編集部
SHARE
