While working with bootstrap 4, I have implemented custom arrows for both left and right navigation.
One issue I encountered is that Bootstrap does not properly check li elements to assign the active class, instead it only adds the class to the first element it encounters.
This problem leads to an incorrect state of the active slide being displayed.
For example:
https://i.sstatic.net/TAnin.png
should be:
https://i.sstatic.net/3VMBa.png
To reproduce this issue, visit:
<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>