以下是滑块代码的重新格式化代码。只有一个用于渲染项目,而不是两个自定义查询。还要注意的是,您应该始终避免query_posts
, 使用WP_Query
相反$the_query->current_post
用于实现active
班请查看以下示例,并根据您的要求进行自定义。
<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 -->