Good morning,
I'm currently developing on the understrap-child theme and I have an issue with a Bootstrap Carousel which I made into a repeater using Acf pro plug-in on Wordpress. The issue is about the indicator arrows not working. The slider is perfectly working as a repeater, but the right arrow (carousel-control-next) does not work, only the left one allows me to interact with the slider.
I'm wondering if the issue is related to the repeater itself or with me making some stupid mistake I'm not able to see! PLEASE HELP ME Here's my code:
<div class="container-fluid containerslider sliderdesktop container-home-sub ">
<div id="HomeCarouselIndicators" class="carousel slide" data-ride="carousel">
<!--indicators-->
<?php if( have_rows('slider') ): $i = 0; ?>
<ol class="carousel-indicators">
<?php while ( have_rows('slider') ): the_row(); ?>
<li data-target="#HomeCarouselIndicators" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>
<?php $i++; endwhile; ?>
</ol>
<?php endif; ?>
<!--end of indicators-->
<div class="carousel-inner" role="listbox">
<?php // check if the repeater field has rows of data
$count = 0;
if( have_rows('slider') ){
//loop through
while ( have_rows('slider') ){
//define the row
the_row();
?>
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item subheader-carousel <?php if ($count==0) {echo "active";} ?>" style="background-image: url('<?php the_sub_field('slider_background'); ?>')" >
<div class="">
</div>
</div>
<a class="carousel-control-prev" href="#HomeCarouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#HomeCarouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php
$count=$count+1;
}
}
?>
</div><!--end of carousel inner-->
</div><!--end of homecarouselindicators-->
</div><!--end container slider-->
