I am using Bootstrap carousel control and I need to use less indicators than slides. So for example for slide 1 - 3 the first indicator will be active. When I click to another indicator, it will skip to slide 4.
I tried to solve it by having all of indicators in HTML, but hiding some of them with display: none. Then with JS find active slide, remove .active class and add it to the right indicator.
HTML
<!-- Indicators -->
<ul class="carousel-indicators">
<!-- For these three only #a indicator should be active -->
<li id="a" data-target="#carousel" data-slide-to="0" class="active"></li>
<li id="a1" class="hidden" data-target="#carousel" data-slide-to="1"></li>
<li id="a2" class="hidden" data-target="#carousel" data-slide-to="2"></li>
<!-- another group -->
<li id="b" data-target="#carousel" data-slide-to="3"></li>
</ul>
JavaScript
$('#carousel').on('slid.bs.carousel', function (e) {
if ($("#a1").hasClass("active")) {
$("#a1").removeClass("active");
$("#a").addClass("active");
} else if ($("#a2").hasClass("active")) {
$("#a2").removeClass("active");
$("#a").addClass("active");
}
});
Here is an example - https://jsfiddle.net/9x5u7kjx/2/
I think this is not elegant solution at all, so is there any better way to do it?
EDIT: I will try to explain it more clearly.
There are for example 12 slides, which slide automatically one by one. They can be controlled by arrows (left and right). But there are only 4 indicators (those circles below carousel). And for slide 1 - 3 the first indicator should be active, for 4 - 6 the second one and so on.
So I can slide one by one item using arrows, but when I click second indicator the carousel will skip to slide 4.
Have a look at the example, it works as it should, but I think this could be solved better.
