Bootstrap 4 Carosuel with ACF Repeater field

Question

Given this HTML code, how can I create a dynamic Carosuel with thumbnails using Bootstrap 4 that can be updated in back-end using ACF Repeater?

My Repeater field is called carousel_repeater and inside I have an Image field called carosuel_image

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
                <!-- slides -->
                <div class="carousel-inner">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div> <!-- Left right --> <a class="carousel-control-prev" href="#custCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#custCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <!-- Thumbnails -->
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div>

Answer 1

Did you check the Advanced Custom Fields documentation? You can check how the repeater fields work here: https://www.advancedcustomfields.com/resources/repeater/

You'll see that you can do the following to show your ACF repeater images on the front-end:

if ( have_rows('carousel_repeater') ) : 

    while ( have_rows('carousel_repeater') ) : the_row();

        $yourImage = get_sub_field('carosuel_image');
        
        if ( $yourImage ) : 

            echo wp_get_attachment_image( $yourImage, 'full' );

        endif;

    endwhile;

endif;

Above snippet assumes that your Image Field is set to ID. If your Image Field has another return type, see https://www.advancedcustomfields.com/resources/image/.