Make bootstrap 5.0 carousel dynamic using ACF and CPT UI

I am trying to make bootstrap 5.0 carousel (with indicators) dynamic using ACF and CPT UI. I realized that I need to display the number in data-bs-slide-to dynamically, as well as other numbers and arrows and the class="active" also dynamically, but I don’t know how. I now have all the slides displayed at once – one on top of the other. If you insert the parameter 'posts_per_page' => 1, then the first slide is visible, as it should be, but the carousel does not spin.

My code:

<!-- Carousel from bootstrap-->
<div id="carouselBootStrap" class="carousel slide" data-bs-ride="carousel">
 <ol class="carousel-indicators">
   <li data-bs-target="#carouselBootStrap" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">1</li>
   <li data-bs-target="#carouselBootStrap" data-bs-slide-to="1" aria-label="Slide 2">2</li>
   <li data-bs-target="#carouselBootStrap" data-bs-slide-to="2" aria-label="Slide 3">3</li>
 </ol>
 <div class="carousel-inner"> 


<?php $loop = new WP_Query(array('post_type' => 'slider_feature', 'orderby' => 'ID', 'order' => 'ASC' )); ?>

<?php  while ($loop->have_posts()): $loop->the_post(); ?>

 <div class="carousel-item active dark-header-overlay">
     <h2 class="centered font-sl-head"><?php the_field('slide_text'); ?> <img class="img-hline" src="<?php the_field('small_slide_img'); ?>" alt=""></h2>
     
     <img class="d-block w-100 h-70" src="<?php the_field('img_slide'); ?>" alt="">
      
   </div>

<?php endwhile; 
wp_reset_query(); ?>


 </div>

 <button class="carousel-control-prev" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Previous</span>
 </button>
 <button class="carousel-control-next" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Next</span>
 </button>
</div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I found a solution:

Make loop everywhere and increment i variable

<!-- Carousel from bootstrap-->
<div id="carouselBootStrap" class="carousel slide" data-bs-ride="carousel">
<?php $loop = new WP_Query(array('post_type' => 'slider_feature', 'orderby' => 'ID', 'order' => 'ASC' )); ?>

  <?php if( $loop->have_posts()): $i = 0; ?>
  <ol class="carousel-indicators">
    <?php while ($loop->have_posts()): $loop->the_post(); ?>
    <li data-bs-target="#carouselBootStrap" data-bs-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>" aria-current="true" aria-label="Slide 1">
      <!-- here I have number links -->
      <?php echo $i+1; ?></li>
      <?php $i++; endwhile; ?>  
  </ol>
<?php endif; ?>
  <div class="carousel-inner">
<?php if( $loop->have_posts()): $i = 0; ?>
<?php  while ($loop->have_posts()): $loop->the_post(); ?>

  <div class="carousel-item dark-header-overlay <?php if($i == 0) echo 'active'; ?>">
      <h2 class="centered font-sl-head"><?php the_field('slide_text'); ?> <img class="img-hline" src="<?php the_field('small_slide_img'); ?>" alt=""></h2>
      
      <img class="d-block w-100 h-70" src="<?php the_field('img_slide'); ?>" alt="">
       
    </div>

<?php $i++; endwhile;  ?>
<?php wp_reset_query(); ?>
<?php endif; ?>

  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0