[英]Bootstrap caroucel could not active 2 carousel-indicators
我通过bootsstap caroucel创建了一个滑块,我在滑块中添加了两个“ carousel-indicators”,一个用于顶部,一个用于底部,效果很好,但是当我单击此处时,底部的旋转木马指示器无法激活是我的2个轮播指标的代码:
<ol id="carou-top" class="carousel-indicators carousel-indicators-top"> <li class="" data-slide-to="0" data-target="#myCarousel"></li> <li class="active" data-slide-to="1" data-target="#myCarousel"></li> </ol> <ol id="carou-bottom" class="carousel-indicators carousel-indicators-bottom"> <li class="" data-slide-to="0" data-target="#myCarousel"></li> <li class="" data-slide-to="1" data-target="#myCarousel"></li> </ol>
您可以使用以下代码实现此目的:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.gettyimages.fr/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.gettyimages.fr/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.gettyimages.fr/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators carousel-indicators-custom">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
JS:
$('#carousel-example-generic').on('slide.bs.carousel', function() {
var resetTimeout;
clearTimeout(resetTimeout);
var i = 0;
var activeSlideNumber = 0;
var carouselIndicatorsDefault = $(this).find('.carousel-indicators > li');
var carouselIndicatorsCustom = $('.carousel-indicators-custom > li');
resetTimeout = setTimeout(function () {
for (i = 0; i < carouselIndicatorsDefault.length; i++) {
if (carouselIndicatorsDefault.eq(i).hasClass('active')) {
activeSlideNumber = i;
}
}
carouselIndicatorsCustom.removeClass('active');
carouselIndicatorsCustom.eq(activeSlideNumber).addClass('active');
}, 20);
});
JS中的For循环会检查您的默认轮播指示器是否具有活动类(当幻灯片更改时),并将此幻灯片的编号存储到activeSlideNumber
变量中。 然后它将所有自定义指标中的活动类删除,并仅添加到活动中的类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.