Support

Account

Home Forums Add-ons Repeater Field Bootstrap 5 Carousel using ACF Repeater Field

Solving

Bootstrap 5 Carousel using ACF Repeater Field

  • 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>
  • 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 πŸ˜‰

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

  • 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!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.