Bootstrap 5 Carousel using ACF Repeater Field

• Trishah

• June 7, 2021 at 9:46 am

I was just able to get this working on my site and wanted to share as I could not find anyone else who posted about it.

Repeater Field: testimonials

Repeater fields are:
testimonial_image (background image set to array), testimonial_name (person’s name), and testimonial_text (their testimonial).

<div id="testimonial_carousel" class="carousel slide" data-bs-ride="carousel">
<?php

// check if the repeater field has rows of data
if( have_rows('testimonials') ):
	$i = 0; // Set the increment variable

	echo '<div class="carousel-indicators">';

	// loop through the rows of data for the tab header
    while ( have_rows('testimonials') ) : the_row();
    ?>

    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="<?php echo $i;?>" class="<?php if($i == 0) echo 'active';?>" aria-current="true" aria-label="Slide 1"></button>

	<?php   $i++; // Increment the increment variable

	endwhile; //End the loop

	echo 	'</div>
		  <div class="carousel-inner">';

 	// loop through the rows of data for the tab header
 	$i = 0; // Set the increment variable
    while ( have_rows('testimonials') ) : the_row();

		$image = get_sub_field('testimonial_image');
		$name = get_sub_field('testimonial_name');
		$testimonial = get_sub_field('testimonial_text');

	?>

    <div class="carousel-item <?php if($i == 0) echo 'active';?>">
      <img src="<?php echo $image['url']; ?>" class="d-block w-100" alt="<?php echo $image['title']; ?>">
      <div class="carousel-caption d-none d-md-block">
        <h5><?php echo $name; ?></h5>
        <?php echo $testimonial; ?>

      </div>
    </div>

	<?php   $i++; // Increment the increment variable

	endwhile; //End the loop

	echo '</div>
			   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
		</div>';
else :
    // no rows found
endif;
?>
</div>

• Eagerbob

• April 21, 2022 at 9:01 am

Thank you, works perfectly and saves me a lot of time!

//EDIT

I did have to change data-bs-target="#carouselExampleCaptions" in the next and prev buttons to data-bs-target="#testimonials_carousel to get the next and prev buttons to work.

Still evry useful off course 😉

• Eagerbob

• April 21, 2022 at 9:19 am

TYPO should be `data-bs-target=”#testimonial_carousel’

• Trishah

• April 21, 2022 at 10:21 am

You’re welcome, Eagerbob. I have benefitted so much from others posting their coding solutions, it’s nice to be able to give back 😀 And thank you for catching the errors and posting about them!