サムネイル付のスライダーを実装してほしいと頼まれ、いつも通り解決方法をGoogle先生に尋ねたのですが、最終的に「bxslider」というプラグインで実装することができたので、備忘録として残しておこうと思います。
必要なライブラリを読み込みます。
<head>
<!-- 省略 -->
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/jquery.bxslider.ini.js"></script>
<!-- 省略 -->
</head>
設定をjquery.bxslider.ini.jsに書いて外部ファイル化しています。
$(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',
pagerCustom: '.bx-pager'
});
});
CSSはスライダーの画像が表示されているとき、サムネイルには「active」というクラスがあたるので、active以外の時は画像を透明度50%で表示させるようにしています。
.bx-pager a img {
opacity: 0.5;
filter: alpha(opacity=50);
}
.bx-pager a.active img {
opacity: 1;
filter: alpha(opacity=100);
}
スライダー部
<div id="slider">
<div class="bg_img">
<ul id="slider2" class="slider">
<li><img src="img/001.jpg" alt="" /></li>
<li><img src="img/002.jpg" alt="" /></li>
<li><img src="img/003.jpg" alt="" /></li>
<li><img src="img/004.jpg" alt="" /></li>
<li><img src="img/005.jpg" alt="" /></li>
</ul>
</div>
<div class="bx-pager">
<a data-slide-index="0" href=""><img src="img/thumb_001.jpg" /></a>
<a data-slide-index="1" href=""><img src="img/thumb_002.jpg" /></a>
<a data-slide-index="2" href=""><img src="img/thumb_003.jpg" /></a>
<a data-slide-index="3" href=""><img src="img/thumb_004.jpg" /></a>
<a data-slide-index="4" href="" class="thumb-edge"><img src="img/thumb_005.jpg" /></a>
</div>
<!-- /#slider --></div>