'Bootstrap 4 carousel indicators active:first issue workaround

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

htmlcsstwitter-bootstrapbootstrap-4


Solution 1:[1]

You should move the arrows out of carouselExampleIndicators div as per the example https://getbootstrap.com/docs/4.6/components/carousel/#with-indicators

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Coded Pixel
Solution 2 csandreas1

Related Questions