その下に小さなサムネイルがあるカルーセルがあります。各サムネイルの上に配置された非表示の <div> を表示する .isActive クラスを追加しています。カルーセルが初めてスライドするときに、最初のサムネイル <div> から .isActive クラスを削除できます。しかし、次の <div> に .isActive を追加できませんでした
選択したサムネイルを対応するスライドと一致させるにはどうすればよいですか?
ここにフィドルがあります： http://jsfiddle.net/gybYP/
ここに私のHTMLがあります：
<div class="js-carousel">
<div class="slidesContainer">
<ul class="clearfix">
<li class="slide green">One</li>
<li class="slide blue">Two</li>
<li class="slide red">Three</li>
</ul>
</div>
<!-- /slidesContainer -->
<div class="thumbnailContainer">
<ul>
<li class="thumb green">
<div>
<a href="#">
<div class="smallSlide"></div>
<div class="thumbOverlay isActive"></div>
</a>
</div>
</li>
<li class="thumb blue">
<div>
<a href="#">
<div class="smallSlide"></div>
<div class="thumbOverlay"></div>
</a>
</div>
</li>
<li class="thumb red">
<div>
<a href="#">
<div class="smallSlide"></div>
<div class="thumbOverlay"></div>
</a>
</div>
</li>
</ul>
</div>
<!-- /thumbnailContainer -->
</div>
<!-- /js-carousel -->
これが私のCSSです：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.slidesContainer {
width:200px;
height: 200px;
overflow: hidden;
margin-bottom: 10px;
}
.slidesContainer ul {
margin: 0;
padding: 0;
width: 600px; /* Slides width times total slides */
position: relative;
top: 0;
left: 0;
list-style:none;
}
.slide {
width: 200px;
height: 200px;
float: left;
}
.green {background-color: green;}
.blue {background-color: blue;}
.red {background-color: red;}
.thumbnailContainer ul {
margin: 0;
padding: 0;
width: 600px; /* Slides width times total slides */
position: relative;
top: 0;
left: 0;
list-style:none;
}
.thumb {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
}
.thumbOverlay {
background-color: gray;
width: 20px;
height: 20px;
position: absolute;
top: 30%;
left: 30%;
display: none;
}
.thumbOverlay.isActive {
display: block;
}
ここに私のJavaScriptがあります:
var slide_width = $('.slidesContainer li').outerWidth();
var left_value = slide_width * (-1);
$(document).ready(function() {
var speed = 3000;
var run = setInterval('rotate()', speed);
$('.slide:first').before($('.slide:last'));
//set the default item to the correct position
$('.slidesContainer ul').css({'left' : left_value});
$('.slidesContainer').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
function rotate() {
//get the right position
var left_indent = parseInt($('.slidesContainer ul').css('left')) - slide_width;
$('.slidesContainer ul').animate(
{
'left' : left_indent
},
200,
function() {
//Remove the class .isActive from the current active thumbnail
$('.thumbnailContainer .thumbOverlay.isActive').removeClass('isActive');
//move the first item and put it as last item
$('.slidesContainer li:last').after($('.slidesContainer li:first'));
//set the default item to correct position
$('.slidesContainer ul').css({'left' : left_value});
}
);
}