Bootstrap 4 carousel indicators active:first issue workaround

user_6041389 0
Viewed 24

I am using bootstrap 4 and use custom arrows for left and right.

Bootstrap is not checking for li elements to add the active class and just adds class to the first element it finds.

This issue indicates incorrect state of the active slide.

e.g.

enter image description here

instead of

enter image description here

Reproduce: https://csandreas1.w3spaces.com/saved-from-Tryit-2022-02-04.html

<div class="carousel-indicators">
    <img class="carousel-arrows carousel-arrow-left" src="/img/icons/arrow-circle-left.svg" onclick="carouselID.carousel('prev')" alt="previous" />
    <li data-target="#carousel"  data-slide-to="0"></li>
    <li data-target="#carousel"  data-slide-to="1"></li>
    <li data-target="#carousel"  data-slide-to="2></li>
    <img class="carousel-arrows" src="/img/icons/arrow-circle-right.svg" onclick="carouselID.carousel('next')" alt="next" />
</div>

enter image description here

bootstrap-4 twitter-bootstrap css html
2 Answers
user_42916120

I've resolved this issue by wrapping the carousel-indicators inside another div.

<div class="wrapper-div">
 .. icon arrow left
  <div class="carousel-indicators">
     <li></li>
     <li></li>
  </div>
 .. icon arrow right
</div>
user_60413890
Related