How do you handle the "is-active" class on orbit slider when using ACF to add images

[nitrokevin]

I'm using ACF gallery to allow users to choose images for a orbit carousel, but if I add the class "is-active" then all images get that class and display stacked briefly, if I omit "is-active" then the first image doesn't show on first loop

I guess I need a way to add "is-active" to just the first image in the loop

<section id="featured-slider">	
<?php $images = get_field('gallery'); if( $images ): ?> <!-- This is the gallery filed slug -->
<div class="orbit" role="region" aria-label="Portfolio" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
<ul class="orbit-container">
<?php foreach( $images as $image ): ?> <!-- This is your image loop -->
<li class="orbit-slide ">
<img class="orbit-image" data-interchange="[<?php echo $image['sizes']['featured-small']; ?>, small], [<?php echo $image['sizes']['featured-medium']; ?>, medium], [<?php echo $image['sizes']['featured-large']; ?>, large], [<?php echo $image['sizes']['featured-xlarge']; ?>, xlarge]"  alt="<?php echo $image['alt']; ?>"  />
</li>
<?php endforeach; ?> <!-- This is where the image loop ends -->
</ul><!-- Image Slider Code -->
</div>

<?php endif; ?> <!-- This is where the gallery loop ends -->
</section>

[conorbarclay]

Declare a counter variable before your foreach loop and then increment it within the loop. Use the number to decide which class to output:

$i = 1;
foreach($images as $image) {
	$class = ( $i === 1 ) ? 'orbit-slide is-active' : 'orbit-slide';
	echo '<li class="' . $class . '">';
        .......
	$i ++;
}