How to add count with PHP?

Question

I want to put an effect Carousel in a session, on the home page, where I pick up the 3 most recent posts. But for this I need the index, change as you do loop.

As it stands, the index appears 0, for all posts. IE, the first post will stick to the <slide :index="0">, the second tb and the third equal. I imagine I need to make a condition with count, for each time you do the loop and pick up 1 post, change the number of index for +1. The second post should stay <slide :index="1">, and the third with <slide :index="2">; how do I make a condition for the index number to increase +1, as the post is called in the loop?

<div id="carousel3d">
  <carousel-3d :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000">
            <!--  Define our WP Query Parameters -->
        <?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>
            <!-- Start our WP Query -->
        <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <!-- Display the Post Title with Hyperlink -->
        ***<slide :index="0">***
            <span class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></span>
            <?php the_post_thumbnail(); ?></div> 
                <!-- Display the Post Excerpt -->
            <?php the_excerpt(__('(more…)')); ?>Veja mais</a>
        </slide> 
        <!-- Repeat the process and reset once it hits the limit -->
        <?php 
        endwhile;
        wp_reset_postdata();
        ?>

    <p style="text-align: center;">Conheça mais</p>
     </carousel-3d>
</div>

But I don’t know how to do it. Someone can help me?

Answer 1

According to the documentation on

https://developer.wordpress.org/reference/classes/wp_query/

Wordpress itself already has a specific property to know the content of the current post:

<slide index="<?php echo $the_query->$current_post; ?>">

Or, using an updated PHP:

<slide index="<?=$the_query->$current_post?>">

If it were in another context it could be something like this:

Out of loop: $i = 0;

And inside:

<slide index="<?php echo ++$i; ?>">

Or even:

<slide index="<?php echo $i++; ?>">

if you want to use post-increment.

But as it comes to Wordpress, no longer makes so much sense, since it has the correct property for the purpose.