スライドショー下にサムネイルのカルーセルを設置したスライドショーです。自動送り・手動送りできます。
carouFredSel を使っているので、先にjqueryとjquery.carouFredSel-6.2.1.jsを読み込みます。
サムネイル用の画像はスライド用画像を小さくして表示しているだけなので、スライド用の画像のみ用意すればサムネイル画像も表示されます。
5枚以上の構成になっていますので、5枚ない場合は、リストのタグを繰り返してください。。。
JSを読み込みます
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
JavaScript
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
$(function() {
$('#thumbs').carouFredSel({
synchronise: ['#images ul', false, true],
auto: true,
width: 719,
items: {
visible: 5,
start: -2
},
scroll: {
items : 1,
onBefore: function( data ) {
data.items.old.eq(2).removeClass('selected');
data.items.visible.eq(2).addClass('selected');
}
},
prev: '#prev',
next: '#next'
});
$('#images ul').carouFredSel({
auto: false,
items: 1,
scroll: {
fx: 'crossfade'
}
});
$('#thumbs img').click(function() {
$('#thumbs').trigger( 'slideTo', [this, -2] );
});
$('#thumbs img:eq(2)').addClass('selected');
});});
</script>
HTMl
<div id="slidewrapper">
<div id="images">
<ul>
<li><a href="#"><img src="img/slide_01.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_02.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_03.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_04.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_05.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_06.jpg" width="719" height="354" alt=""></a></li>
<li><a href="#"><img src="img/slide_07.jpg" width="719" height="354" alt=""></a></li>
</ul>
</div>
<div id="thumbs">
<img src="img/slide_01.jpg" width="110" height="54" alt="">
<img src="img/slide_02.jpg" width="110" height="54" alt="">
<img src="img/slide_03.jpg" width="110" height="54" alt="">
<img src="img/slide_04.jpg" width="110" height="54" alt="">
<img src="img/slide_05.jpg" width="110" height="54" alt="">
<img src="img/slide_06.jpg" width="110" height="54" alt="">
<img src="img/slide_07.jpg" width="110" height="54" alt="">
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
CSS
/* slidewrapper */
#slidewrapper {
position: relative;
background-color: #fff;
border: 1px solid #C9CACA;
width: 719px;
height: 449px;
overflow: hidden;
}
#slidewrapper ul li {
display: block;
float: left;
}
#images { overflow: hidden; }
#thumbs {
height: 70px;
overflow: hidden;
}
#images {
width: 721px;
height: 354px;
}
#thumbs { }
#thumbs img {
width: 110px;
height: 54px;
margin: 20px 7px 0 7px;
cursor: pointer;
}
#thumbs img.selected {
opacity: 0.8;
-ms-filter: "alpha( opacity=80 )";
filter: alpha(opacity=80);
}
#prev {
width: 15px;
height: 21px;
display: block;
background: transparent url("../img/bg_carousel_right.png") no-repeat 0 0;
position: absolute;
left: 695px;
bottom: 37px;
}
#next {
width: 15px;
height: 21px;
display: block;
background: transparent url("../img/bg_carousel_left.png") no-repeat 0 0;
position: absolute;
left: 15px;
bottom: 37px;
}