Integrating Bootstrap Carousel Indicators with ACF Plugin - php

Question

I am using the advanced custom fields Wordpress plugin to create various slides for a slider. To display the slider I am using Bootstraps Carousel.
The body of the slider if functioning fine. I don't, however, know how to loop through, count the slides and print a carousel indicator to the page for each slide.
I currently have 3 hardcoded at the top of the slider.
<ul id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<li class="carousel-inner">
<?php
$c = 0;
$class = '';
while ( have_rows('slide') ) : the_row();
$c++;
if ( $c == 1 ){ $class = ' active';}
else{ $class=''; } ?>
<?php
$image = get_sub_field('image'); ?>
<div class="carousel-item <?php echo $class; ?> image" style="background: url('<?php echo $image; ?>') no-repeat; background-size: cover; background-position: left center;">
</div>
<?php
endwhile; ?>
</li> <!-- end li.image -->
</ul> <!-- end ul -->
I need to find a way to open the ordered list before the slider starts and close it when it ends. At the same time, I need to echo out its li elements for each slide.

Answer 1

<section id="banner">
<?php if( have_rows('slides') ) { ?>
<?php
$num = 0;
$active = 'active';
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php while( have_rows('slides') ) : the_row() ; ?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $num; ?>" class="<?php echo $active; ?>"></li>
<?php
$num++;
$active = '';
?>
<?php endwhile; ?>
</ol>
<div class="carousel-inner">
<?php $active = 'active'; ?>
<?php while( have_rows('slides') ) : the_row() ;
$image = get_sub_field('image');
$mainText = get_sub_field('main_text');
$subText = get_sub_field('sub_text');
?>
<div class="carousel-item <?php echo $active; ?>">
<img class="d-block w-100" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="carousel-caption d-none d-md-block">
<h5><?php echo $mainText; ?></h5>
<p><?php echo $subText; ?></p>
</div>
</div>
<?php $active = ''; ?>
<?php endwhile; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php } ?>
</section>

Answer 2

If your HTML is like this :
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Then use this php code :
<?php
$sliders = get_field('slide');
if($sliders){ ?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php $isActive ='';
foreach($sliders as $key=>$slider){
if($key==0){
$isActive = 'active';
}
echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$key.'" class="'.$isActive.'"></li>';
} ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
$activeSlide ='';
foreach($sliders as $key=>$sliderimg){
if($key==0){
$activeSlide = 'active';
}
echo '<div class="carousel-item '.$activeSlide.'">';
echo '<img class="d-block img-fluid" src="'.$sliderimg['image']." alt="First slide">';
echo '</div>';
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php } ?>