YogeshChauhan . com

WordPress: How to display slider repeater fields in ACF?

in WordPress on February 27, 2021

The Repeater field is a really good solution for repeating content like slides, team members, directory, and many more repeating contents.

The Repeater field type acts as a parent to a set of sub fields which can be repeated again and again and there are no limits to the number of repeats either as long as you don’t specify.

The Repeater field will return an array of rows, where each row is an array containing sub field values.

When you add a repeater field, it creates additional functions specifically for looping over rows and accessing sub field values like have_rows, the_row, get_sub_field, and the_sub_field functions.

How to loop through a Repeater field and generate the HTML for a basic image slider?



<?php if( have_rows('slides') ): ?>
    <ul class="slides">
    <?php while( have_rows('slides') ): the_row(); 
        $image = get_sub_field('image');
        ?>
        <li>
            <?php echo wp_get_attachment_image( $image, 'full' ); ?>
            <p><?php the_sub_field('caption'); ?></p>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>


How to manually loop over a Repeater field value using a foreach loop?



<?php 
$rows = get_field('repeater_field_name');
if( $rows ) {
    echo '<ul class="slides">';
    foreach( $rows as $row ) {
        $image = $row['image'];
        echo '<li>';
            echo wp_get_attachment_image( $image, 'full' );
            echo wpautop( $row['caption'] );
        echo '</li>';
    }
    echo '</ul>';
}


amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

10 Usability Blunders to AvoidUI/UXWhat is the best way to add JavaScript Code into HTML?HTMLHow to obfuscate JavaScript code to hide it from View Source?JavaScriptSafe Practice to add Links to cross-origin destinationUI/UXHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?AngularSQL Right JoinSQL/MySQLHow to create a flip effect with CSS?CSSWhat is Hoisting in JavaScript?JavaScriptHow to Validate User Name, Email Address and URL in PHP?PHPContent Blocks in SCSS (Sass)SCSSQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptPHP Login System using PDO Part 2: Login using Email or UsernamePHP