I want to put a Carousel effect in a session on the home page where I get the 3 most recent posts. But for this I need index , change as you do loop .
As it stands, index appears 0
, for all posts. That is, the first post will be with the <slide :index="0">
, the second tb and the third equal. I imagine I need to do a condition with count
, for each time I loop and get 1 post, change the index number to +1
.
The second post should be <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 do not know how. Can anyone help me?