サムネイルもスライドするスライドショーをbxsliderで作ってみた
- thumbnail
- スライダーといえばbxSlider！
マークアップのお仕事をしていると、
毎回必ずと言っていいほどスライダーがデザインに入っているのですが、
私がいつもお世話になっているのが、bxsliderというスライドショー用のjQueryのプラグインです！
・シンプル
・導入が驚くほど簡単
・カスタマイズも簡単
・公式サイトのサンプルの説明が豊富
という、とってもありがたいこのプラグイン！しかも！
・カルーセルスライダー対応
・サムネイル付きスライダー対応
・レスポンシブ対応
・フリックでスライド対応
・選べるエフェクト（普通にスライドorフェード）
・デフォルトでコントロール（よく見る黒いちょぼちょぼ）とページャー（前後へ動かす左右にある矢印アイコン）付き
などなど、シンプルな物からちょっと変形スタイルまで、
スライダーで求められることは大概簡単にカスタマイズできます！
しかーーーーし！
先日、こんなデザインがやって来ました。
なるほどなるほど、サムネイル(ページャー)もスライドさせちゃうのね（；￣ェ￣）
うーんこれは公式サイトにもサンプルがないぞ。。
Google先生に”サムネイルがスライド bxslider”とかでくぐっても全然出てこないぞ。。
でも今日中になんとかしたい。。(というかしなければ。。)
ということで、自分でごにょごにょしてなんとか完成させました！
これが若干てこずったので、せっかくなので記事にしてみたいと思います^^*
目次
1.公式サイトよりbxsliderをダウンロードしよう！
2.bxsliderを導入したいファイルがあるフォルダに必要ファイルをコピペしよう！
3.スライダーを導入するためのコードを記述しよう！
4.jquery.bxslider.cssのコードを修正しよう！
5.補足
1.公式サイトよりbxsliderをダウンロードしよう！
まずは公式サイトよりbxsliderをダウンロードしましょう！
2.bxsliderを導入したいファイルがあるフォルダに必要ファイルをコピペしよう！
「jquery.bxslider.min.js」
「jquery.bxslider.css」
「imagesフォルダの中身」
上記３つを、bxsliderを導入したいファイルがあるフォルダのディレクトリ構造に合わせにコピペしましょう！
デモではそれぞれ「js」「css」「img」のフォルダにコピーしました！
3.スライダーを導入するためのコードを記述しよう！
スライダーを導入したいファイル（デモはindex.html）の〜に下記のコードを追加しましょう！
|
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 |
<!-- bxSlider用ファイル Start--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <!-- //bxSlider用ファイル End--> <!-- bxSlider用記述 Start--> <script>$(document).ready(function(){ //メインスライド用の記述 $('.bxslider01').bxSlider({ pagerCustom: '#bx-pager',//ページャーをカスタマイズする（サムネイルにする）ための記述 controls:false//前後の矢印を消すための記述 }); }); //サムネイルをスライドさせるための記述 $(document).ready(function(){ $('.bxslider02').bxSlider({ pager:false, minSlides: 5,//１スライドに表示するサムネイルの数 maxSlides: 5,//１スライドに表示するサムネイルの最大数 slideWidth: 90,//サムネイルの横幅（単位はpx） slideMargin: 10,//サムネイル間の余白（単位はpx） nextSelector: '#NextIcon',//"次へ”矢印をカスタマイズするための記述 prevSelector: '#PrevIcon'//"前へ”矢印をカスタマイズするための記述 }); }); </script> <!-- //bxSlider用記述 End --> |
スライダーを導入したいファイルの、スライダーを配置する場所に下記のコードを追加しましょう
|
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 |
<div class="slider"> <!--メインスライダー Start --> <ul class="bxslider01"> <li><img src="img/img-sample01.jpg" width="620" height="400" alt="slide01" /></li> <li><img src="img/img-sample02.jpg" width="620" height="400" alt="slide02" /></li> <li><img src="img/img-sample03.jpg" width="620" height="400" alt="slide03" /></li> <li><img src="img/img-sample04.jpg" width="620" height="400" alt="slide04" /></li> <li><img src="img/img-sample05.jpg" width="620" height="400" alt="slide05" /></li> <li><img src="img/img-sample06.jpg" width="620" height="400" alt="slide06" /></li> <li><img src="img/img-sample07.jpg" width="620" height="400" alt="slide07" /></li> <li><img src="img/img-sample08.jpg" width="620" height="400" alt="slide08" /></li> <li><img src="img/img-sample09.jpg" width="620" height="400" alt="slide09" /></li> <li><img src="img/img-sample10.jpg" width="620" height="400" alt="slide10" /></li> </ul> <!--// メインスライダー End--> <!--サムネイル（ページャー）用スライダー Start--> <div class="controlWrap"> <ul id="bx-pager" class="bxslider02"> <li><a data-slide-index="0" href=""><img src="img/img-sample01.jpg" width="90" height="60" alt="thumb01" /></a></li> <li><a data-slide-index="1" href=""><img src="img/img-sample02.jpg"width="90" height="60" alt="thumb02" /></a></li> <li><a data-slide-index="2" href=""><img src="img/img-sample03.jpg" width="90" height="60" alt="thumb03" /></a></li> <li><a data-slide-index="3" href=""><img src="img/img-sample04.jpg" width="90" height="60" alt="thumb04" /></a></li> <li><a data-slide-index="4" href=""><img src="img/img-sample05.jpg" width="90" height="60" alt="thumb05" /></a></li> <li><a data-slide-index="5" href=""><img src="img/img-sample06.jpg" width="90" height="60" alt="thumb06" /></a></li> <li><a data-slide-index="6" href=""><img src="img/img-sample07.jpg" width="90" height="60" alt="thumb07" /></a></li> <li><a data-slide-index="7" href=""><img src="img/img-sample08.jpg" width="90" height="60" alt="thumb08" /></a></li> <li><a data-slide-index="8" href=""><img src="img/img-sample09.jpg" width="90" height="60" alt="thumb09" /></a></li> <li class="last"><a data-slide-index="9" href=""><img src="img/img-sample10.jpg" width="90" height="60" alt="thumb10" /></a></li> </ul> <p id="PrevIcon"></p> <p id="NextIcon"></p> </div> <!--サムネイル（ページャー）用スライダー End--> </div> |
4.jquery.bxslider.cssのコードを修正しよう！
jquery.bxslider.cssに下記のコードを追加しましょう！
場所はどこでもOKですが、デモはjquery.bxslider.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 |
/*カスタマイズ用追記CSS Start*/ div.slider { width:620px; display:block; margin:40px auto; } div.slider .bx-wrapper { margin:0 auto 15px;/*メインスライダーとサムネイルの間の余白を変更*/ } ul.bxslider01 li { display:block; width:620px;/*メインスライダーの横幅*/ height:400px;/*メインスライダーの縦幅*/ } ul.bxslider01 li img{ display:block; width:620px; height:auto; } ul.bxslider02 li a { display:block; width:90px;/*サムネイルの横幅*/ height:60px;/*サムネイルの縦幅*/ } ul.bxslider02 li a img{ display:block; width:90px;/*サムネイルの横幅*/ height:auto;/*サムネイルの縦幅*/ } div.controlWrap { width:620px; display:block; position:relative; margin:0 auto; } div.controlWrap p#PrevIcon a{ display:block; width:13px;/*オリジナルの矢印アイコン画像の横幅を設定しましょう*/ height:19px;/*オリジナルの矢印アイコン画像の縦幅を設定しましょう*/ position:absolute; background:url(../img/icon-arrow-prev01.jpg) left center no-repeat;/*オリジナルの矢印アイコンを設定しています*/ color:#fff; top:20px; left:20px; text-indent:-9999px; } div.controlWrap p#NextIcon a{ display:block; width:13px;/*オリジナルの矢印アイコン画像の横幅を設定しましょう*/ height:19px;/*オリジナルの矢印アイコン画像の縦幅を設定しましょう*/ position:absolute; background:url(../img/icon-arrow-next01.jpg) left center no-repeat;/*オリジナルの矢印アイコンを設定しています*/ color:#fff; top:20px; right:20px; text-indent:-9999px; } /*カスタマイズ用追記CSS End*/ |
jquery.bxslider.cssの下記のコードを修正しましょう
この部分の記述を全部削除orコメントアウトしましょう（jquery.bxslider.cssの32行目あたり）
※この部分の記述は、スライダーに白い枠と影をつけるデフォルトのスタイルです。
今回はシンプルで装飾のないスライダーなため、削除します。
|
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; } |
画像のパスをディレクトリ構造に合わせて修正しましょう
jquery.bxslider.css内の画像パスは、bxsliderのダウンロードファイルのディレクトリ構造にあわせられているため、
パスの記述修正をしなければロード中の画像や矢印アイコン（今回は使用していませんが）が表示されません。
デモの場合、
bxsliderのダウンロードファイル内のimagesフォルダーに入っていた画像は、
画像を格納するimgフォルダに入れてしまったため、
画像のパスを「url(images/….」から「url(../img/….」に変更しています！
Dreamweaverの人は「Command+f」で簡単に全部置換ができますよー(^^)
完成！
補足
サムネイル用スライダーの前後矢印を、あえてデフォルトのまま使わずわざわざ
「#NextIcon」「#PrevIcon」で指定したのは、
どうも#bx-pagerを指定しているdiv内に前後矢印の記述を入れてしまうと、
サムネイル用スライダーを動かす時に勝手にメインスライダーが動いてしまったり、
スライダーが動かなくなるという誤作動が起きてしまうため、
div#bx-pagerの外にサムネイル様スライダーのコントローラー（前後矢印）を出してしまいたかったからです。
以上！
よかったら試してみてくださーい♪
