如何在HTML的.slider-item中添加活动轮播类,即具有相同的活动和停用处理?
HTML:
<div class="client-img-wrapper">
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
</div>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class=""></li>
<li data-target="#carousel" data-slide-to="1" class="active"></li>
<li data-target="#carousel" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://reduan.net/slider_01.jpg">
</div>
<div class="item">
<img src="http://reduan.net/slider_02.jpg">
</div>
<div class="item">
<img src="http://reduan.net/slider_03.jpg">
</div>
</div>
</div>
JS:
$('.carousel').carousel();
CSS:
.slider-item {
background: red;
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.slider-item.active {
background: blue;
}