基本上我要做的是,我有一个带有8个幻灯片的Bootstrap轮播。我正在使用2个轮播指示器。
这是我的第一个指标,它适用于.active
类
<ol class="rightci carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" ></li>
</ol>
这是我的第二个指标它工作正常。当我点击链接轮播幻灯片完全改变但.active
课程剂量不会自动改变而不是第一个指标.active
改变。
<div class="left leftci carousel-indicators">
<a href=""><span class="leftindicators active" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a>
</div>
帮助我
答案 0 :(得分:1)
我认为您需要编写一些自定义js默认情况下Bootstrap没有此功能,因此您需要创建自己的carousel-indicators
css
.carousel-indicators2 {
position: absolute;
top: 10px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators2 li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000\9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
.carousel-indicators2 .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}
JS
$('.carousel').on('slid.bs.carousel', function() {
$(".carousel-indicators2 li").removeClass("active");
indicators = $(".carousel-indicators li.active").data("slide-to");
a = $(".carousel-indicators2").find("[data-slide-to='" + indicators + "']").addClass("active");
console.log(indicators);
})
<强> Fiddle 强>
答案 1 :(得分:0)
我也面临类似的问题。所以我也使用上面给定的解决方案。但是点击时无法正常工作。 因此,这是我为100%修复此问题所做的工作。在上述解决方案上几乎没有增强。
问题:我想为一个轮播展示2个指标。使用上述解决方案后,一切正常,但单击后失败。
解决方案:所以我尝试了
$('.carousel').on('slid.bs.carousel', function() {
var indicatorsAct = $(".carousel-indicator-icons li.active").data("slide-to");
$(".carousel-indicators-numbers li").removeClass("active");
$(".carousel-indicators-numbers").find("[data-slide-to='" + indicatorsAct + "']")
.addClass("active");
});
$('ol.carousel-indicator-icons li').on("click",function(){
$('ol.carousel-indicator-icons li.active').removeClass("active");
$("ol.carousel-indicators-numbers li.active").removeClass("active");
$(this).addClass("active");
var indicators = $(this).data("slide-to");
$(".carousel-indicators-numbers").find("[data-slide-to='" + indicators + "']")
.addClass("active");
});
其中.carousel-indicator-icons
是第一个指示符的容器类,而.carousel-indicators-numbers
是第二个指示符的类。
我希望这会对遇到类似问题的其他人有所帮助。