[英]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.