Following is the reformatted code for your slider code. Instead of two custom queries, only one is used for rendering items. Also note that, you should always avoid query_posts
, use WP_Query
instead. $the_query->current_post
is used for implementation of active
class. Please check out the following example and customize it as per your requirement.
<div id="myCarousel" class="carousel slide" data-interval="1000" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">0</li>
<li data-target="#myCarousel" data-slide-to="1">1</li>
<li data-target="#myCarousel" data-slide-to="2">2</li>
<li data-target="#myCarousel" data-slide-to="3">3</li>
<li data-target="#myCarousel" data-slide-to="4">4</li>
</ol>
<div class="carousel-inner">
<?php
$qargs = array(
'posts_per_page' => 5,
'no_found_rows' => true,
'ignore_sticky_posts' => true,
);
$the_query = new WP_Query( $qargs );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
<div class="carousel-item<?php echo esc_attr( $active_class ); ?>">
<?php the_post_thumbnail( 'large', array('class' => 'main-home')); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div><!-- #myCarousel -->