Support

Account

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

Unread

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>
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.