[英]Bootstrap one carousel with two carousel-indicators
Basically what I am trying to do is, I have one Bootstrap carousel with 8 slides in it.I am using 2 carousel-indicators.基本上我想要做的是,我有一个带有 8 张幻灯片的 Bootstrap 轮播。我正在使用 2 个轮播指示器。
This is my first indicator it work fine with .active
class这是我的第一个指标,它适用于
.active
类
<ol class="rightci carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" ></li>
</ol>
this is my Second Indicator it works fine.when I click on the link carousel slides change perfectly but .active
class dose not change automatically rather on first indicators .active
changes fine.这是我的第二个指标,它工作正常。当我点击链接时,轮播幻灯片更改完美,但
.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>
help me with it帮我解决
I think you need to write some custom js Bootstrap has not this functionality by default so you need to make your own carousel-indicators
我认为您需要编写一些默认情况下不具有此功能的自定义js Bootstrap,因此您需要制作自己的
carousel-indicators
css 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 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);
})
I too faced similar kind of issue. 我也面临类似的问题。 So I too used above given solution.
所以我也使用上面给定的解决方案。 But was not working correctly on click.
但是点击时无法正常工作。 So here is what I did to fix this issue 100%.
因此,这是我为100%修复此问题所做的工作。 With little enhancement on above solution.
在上述解决方案上几乎没有增强。
Issue: I wanted to show 2 indicators for one carousel. 问题:我想为一个轮播展示2个指标。 Everything works fine after using above solution but fails after clicking.
使用上述解决方案后,一切正常,但单击后失败。
Solution: So I tried this 解决方案:所以我尝试了这个
$('.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");
});
Where .carousel-indicator-icons
is the container class for first indicator and .carousel-indicators-numbers
is the class for second indicator. 其中
.carousel-indicator-icons
是第一个指示符的容器类, .carousel-indicators-numbers
是第二个指示符的类。
I hope this will help to other folks who faced similar issue. 我希望这会对遇到类似问题的其他人有所帮助。
I had a similar case, but only one of the carousel-indicators needs to be visible at a time (depending an screen width我有一个类似的案例,但一次只需要一个轮播指示器可见(取决于屏幕宽度
This is my solution:这是我的解决方案:
let carouselIndicatorButtons = document.querySelectorAll('.carousel-indicators button')
carouselIndicatorButtons.forEach((button) => {
button.addEventListener('click', function () {
carouselIndicatorButtons.forEach((button) => {
button.classList.remove('active')
})
this.classList.add('active')
}, false);
});
However it only marks the indicators on the clicked button, not the corresponding button on the other indicator.然而,它只标记点击按钮上的指标,而不是其他指标上的相应按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.