I’m using ACF gallery to allow users to choose images for a foundation6 orbit carousel, but if I add the class “is-active” to “orbit-slide” 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>
create a counter
$count = 0;
foreach( $images as $image ) {
// when outputing the element something like this
// I haven't a clue where you're trying to add this class in the code you provided
// I'm just guessing that it in the li
// some code here ......
?>
<li class="orbit-slide <?php
if ($count == 0) {
echo 'is-active';
}
?>">
<?php
// some more code here
// increment count before end loop
$count++;
} // end foreach
Thanks for this John, I worked this in nicely to an image slider using the Gallery field:
<div class="page-block-right slide-nav-section">
<?php
$images = get_field('gallery');
$size = 'large';
if( $images ): ?>
<?php foreach( $images as $image_id ): ?>
<input type="radio" id="<?php echo $image_id;?>" name="slider" <?php
if ($count == 0) {
echo 'checked';
}
?> >
<label for="<?php echo $image_id;?>"></label>
<div class="slide bg4"><?php echo wp_get_attachment_image( $image_id, $size ); ?></div>
<?php $count++; ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
