「bxSlider」の使い方2　～サムネイルをカールセルにしたスライドショー～

こんにちは。デザイナーの（鈴）です。
気付いたら2016年になっていました。
最近は時間の流れを早く感じるようになり、
年を実感するようになりました。

今回は以前紹介した「bxSlider」のカスタマイズ例を紹介します。
サムネイルをカールセルにしたスライドショーの設定方法です。

「bxSlider」とは

設置方法が簡単なスライダープラグインで、レスポンシブにも対応しています。
基本的な導入方法が知りたい方は以前紹介した記事
「bxSlider」の使い方　～スライダー、カールセル、レスポンシブにも便利～
をご覧ください。

「bxSlider」の導入

必要なファイルを下記公式ページの右上の「Download」から一式ダウンロード。
http://bxslider.com/

ダウンロードしたファイルから下記2つを読み込みます。
jquery.bxslider.css
jquery.bxslider.min.js

読み込む記述は下記のようになります。
※jQuery本体ファイルの読み込みを忘れずに！

<link rel="stylesheet" type="text/css" href="jquery.sidr.light.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sidr.min.js"></script>

JavaScriptの記述方法

基本的にはhead内か外部JSとして下記のコードを記述すれば、イベントが実行されます。
例として「bxslider01」、「bxslider02」というclass名にしていますが、
idやclassでも可能で、自由に指定できます。
今回の場合はメインとサムネイル用で指定を分ける必要があるので注意です。

$(document).ready(function(){
//メインスライド用
$('.bxslider01').bxSlider({
pagerCustom: '#bx-pager',  //ページャーをサムネイルにする
controls:false//前後の矢印を消す
});
});
//サムネイルのカールセル用
$(document).ready(function(){
$('.bxslider02').bxSlider({
pager:false,  
minSlides: 4,  //１スライド内のサムネイルの数
maxSlides: 4,  //１スライド内のサムネイルの最大数
slideWidth: 100,  //サムネイルの横幅（単位はpx）
slideMargin: 10,  //サムネイル間の余白（単位はpx）
nextSelector: '#NextIcon',  //"次へ"矢印をカスタマイズするための記述
prevSelector: '#PrevIcon'//"前へ"矢印をカスタマイズするための記述
});
});

htmlの記述方法

イベントを発生させたい要素をHTML内に記述します。

<!--メインスライダー-->
<ul class="bxslider01">
<li><img src="img/01.jpg" /></li>
<li><img src="img/02.jpg" /></li>
<li><img src="img/03.jpg" /></li>
<li><img src="img/04.jpg" /></li>
<li><img src="img/05.jpg" /></li>
<li><img src="img/06.jpg" /></li>
<li><img src="img/07.jpg" /></li>
<li><img src="img/08.jpg" /></li>
</ul>

<!--サムネイル-->
<div class="controlWrap">
<ul id="bx-pager" class="bxslider02">
<li><a data-slide-index="0" href=""><img src="img/01.jpg" /></a></li>
<li><a data-slide-index="1" href=""><img src="img/02.jpg" /></a></li>
<li><a data-slide-index="2" href=""><img src="img/03.jpg" /></a></li>
<li><a data-slide-index="3" href=""><img src="img/04.jpg" /></a></li>
<li><a data-slide-index="4" href=""><img src="img/05.jpg" /></a></li>
<li><a data-slide-index="5" href=""><img src="img/06.jpg" /></a></li>
<li><a data-slide-index="6" href=""><img src="img/07.jpg" /></a></li>
<li class="last"><a data-slide-index="7" href=""><img src="img/08.jpg" /></a></li>
</ul>
<p id="PrevIcon">

<p id="NextIcon">

</div>
<!--// サムネイル-->
</div>

こちらも例として「bxslider01」、「bxslider02」というclass名にしていますが、
前述のスクリプトの指定と合わせていれば自由に指定可能です。
また今回はメインスライダーとサムネイルを同じ画像を使用していますが、
サムネイルは別に画像を用意することも可能です。

CSSの記述方法

div.slider {
width:620px;
display:block;
margin:40px auto;
}
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:100px;
height:60px;
}
ul.bxslider02 li a img{/*サムネイルの画像*/
display:block;
width:100px;
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/btn_prev.png) 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/btn_next.png) left center no-repeat;
color:#fff;
top:20px;
right:20px;
text-indent:-9999px;
}

上記の記述をカスタマイズすることで、
メインスライダー、サムネイルのサイズ、余白を調整が可能です。
矢印のカスタマイズは指定が必須になります。
用意した画像サイズや位置の指定に注意が必要です。

実装＆カスタマイズしてみて

相変わらず「bxSlider」には感謝です。
今回の方法も割と簡単にカスタマイズできました。
ただ初心者の方には調整する箇所が多く、難しいかもしれないので、
一項目ごと調整することをオススメします。

読み込みを考慮し、メインスライダーとサムネイルの画像を同じものを使用できます。
またサムネイル画像をメインスライダーとは別に用意することも可能です。
メインスライダーにも矢印を追加もできるなどカスタマイズ性が高いです。

よくみるスライダーではありますが、
このタイプの「bxSlider」の制作例は少ないので参考にどうぞ。

参考リンク

下記サイトは参考にしたサイトになります。
丁寧に説明してくれているので、詳しく知りたい方はどうぞ。

http://fuji-a02.com/blog1/2014/10/09/thumbnail_slide_bxslider/