Populate bootstrap4 carousel with indicators with advanced-custom-fields gallery field

Question

I'm trying to populate a bootstrap4 carousel with indicators with images from advanced custom fields gallery field. I'm using understrap theme on WordPress.

<?php $pictures = get_field("clinic_images");?>

<section>
    <div class="container">
        <div class="row justify-content-center">
            <h3>Our clinic</h3>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <?php if($pictures):?>
                <div class="carousel-inner">
                    <?php foreach( $pictures as $picture ): ?>
                    <div class="carousel-item active">
                        <img src="<?php echo $picture['url']; ?>" class="d-block w-100" alt="<?php echo $picture['alt']; ?>">
                    </div>
                    <?php endforeach; ?>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section> ```

The first picture is displaying, the controls aren't displaying, unable to navigate through pictures; expecting pictures to switch automatically and being able to switch manually with controls or clicking the indicators.

essexboyracer essexboyracer · Accepted Answer · 2019-06-19T14:57:55

As per the BS4 Carousel Docs:

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

So what you would need to do is add the active class to the first image that comes out of the ACF gallery loop only. An easy way to do this is to add a counter to the foreach loop and check what number the counter is on each iteration of the loop

<div class="carousel-inner">
    <?php 

    $i = 0; $add_class = '';

    foreach( $pictures as $picture ): 

    if ($i == 0 ) { $add_class = ' active'; } else { $add_class = ''; }

    ?>
    <div class="carousel-item<?php echo $add_class; ?>">
        <img src="<?php echo $picture['url']; ?>" class="d-block w-100" alt="<?php echo $picture['alt']; ?>">
    </div>
    <?php $i++; endforeach; ?>
</div>

There might be a slightly shorter way to do this with modulo

Populate bootstrap4 carousel with indicators with advanced-custom-fields gallery field

2 Answers