Add extra class to first div on Bootstrap slider with ACF (Advanced Custom Fields) in php

Question

Im trying to build a bootstrap slider with an ACF repeater field with 3 slider images. This is my code:

<?php if( have_rows('text_block_repeater') ): ?>
   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner">
           <?php while( have_rows('double_image') ): the_row(); ?>
           <div class="carousel-item">
           <?php $image = get_sub_field('image'); if( !empty( $image ) ): ?>
                <img class="w-100" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                    <?php endif; ?>
           </div>
           <?php endwhile; ?>
       </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
   </div>
<?php endif; ?>

It doesn't work because the first image in the "carousel-inner" div needs to to have an "active" class appended to it. So, the first image needs to be in this div:

<div class="carousel-inner active">

Subsequent images then need to be in this div:

<div class="carousel-inner">

How can i achieve that with my php code or apply some javascript?

Answer 1

<?php if( have_rows('text_block_repeater') ): ?>
<?php $i = 0; ?>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">

<?php while( have_rows('double_image') ): the_row(); ?>
    <?php $i++; 
        if($i == 1) {
            $active_class = "active";                
        }else{            
            $active_class = "";            
        }?>
            <div class="carousel-item <?php echo $active_class; ?>">
                <?php $image = get_sub_field('image'); if( !empty( $image ) ): ?>
                    <img class="w-100" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                <?php endif; ?>
            </div>
        
<?php endwhile; ?>

Previous Next