Issue about slider recent posts in PHP

Question

I'm embarrassed because i'm working on a slider in order to display recent posts. I'm using for that the Carousel Bootstrap, here is my code :

<?php
        $lastposts = get_posts( array(
            'posts_per_page' => 3,
                'category' => 584
        ) );

        if ( $lastposts ) { ?>
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">



            <?php foreach ( $lastposts as $post ) :
                setup_postdata( $post ); ?>
                        <div class="carousel-item active">
                        <img src="/wp-content/uploads/slider.png">
                                <div class="carousel-caption d-none d-md-block">
                                    <div class="title">
                                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </div>
                                </div>
                            </div>

            <?php
            endforeach;
            wp_reset_postdata();
        }
?>
</div>
</div>

The issue is that all my items are "active".

How can i solve that ? To put only the first item as active.

Answer 1

Try it with a counter variable:

<?php
        $lastposts = get_posts( array(
            'posts_per_page' => 3,
                'category' => 584
        ) );

        if ( $lastposts ) { ?>
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">


            <?php $counter = 1; ?>
            <?php foreach ( $lastposts as $post ) :
                setup_postdata( $post ); ?>
                        <div class="carousel-item <?php echo ($counter==1) ? "active" : ""; ?>">
                        <img src="/wp-content/uploads/slider.png">
                                <div class="carousel-caption d-none d-md-block">
                                    <div class="title">
                                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </div>
                                </div>
                            </div>

            <?php
                $counter++;
            endforeach;
            wp_reset_postdata();
        }
?>
</div>
</div>