我试图创建一个引导旋转木马,在每张幻灯片上显示3篇文章。但我的代码在每张幻灯片上只显示一个项目。
Here is my code:
<div class="col-lg-9">
<div id="popular-services" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!-- Start Carousel Indicator Loop -->
<?php if ( $popular_services->have_posts() ) : while ( $popular_services->have_posts() ) : $popular_services->the_post(); ?>
<li data-target="#popular-services" data-slide-to="<?php echo $popular_services->current_post; ?>" class="<?php if ( $popular_services->current_post == 0 ) : ?>active<?php endif; ?> text-primary"></li>
<?php endwhile; endif; ?>
</ol>
<?php rewind_posts(); ?>
<div class="carousel-inner" role="listbox">
<?php if ( $popular_services->have_posts() ) : while ( $popular_services->have_posts() ) : $popular_services->the_post(); ?>
<div class="carousel-item <?php if ( $popular_services->current_post == 0 ) : ?>active<?php endif; ?>">
<div class="row">
<div class="col-lg-4">
<div class="card">
<?php
if ( has_post_thumbnail() ) {
echo get_the_post_thumbnail($post->ID, \'thumbnail\', array(\'class\' => \'card-img-top\') );
}
?>
<div class="card-body">
<?php echo the_title(\'<h5 class="card-title">\', \'</h5>\'); ?>
<p class="card-text"><?php echo my_custom_excerpt(20); ?></p>
<?php echo my_custom_read_more(\'Learn More\'); ?>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div>
为了让它按照我的需要工作,我需要做哪些更改。
提前谢谢。
最合适的回答,由SO网友:Sally CJ 整理而成
尽管您的问题是一个通用的PHP编程问题,但您尝试做的事情可以像这样实现,其中关键是$i
这是一种习惯while
计数器:
<div class="carousel-inner" role="listbox">
<?php if ( $popular_services->have_posts() ) :
$i = 0; // add this counter
while ( $popular_services->have_posts() ) : $popular_services->the_post();
?>
<?php if ( $i % 3 === 0 ) : ?>
<div class="carousel-item <?php if ( $popular_services->current_post == 0 ) : ?>active<?php endif; ?>">
<div class="row">
<?php endif; ?>
<div class="col-lg-4">
<div class="card">
your code here
</div>
</div>
<?php if ( $i % 3 === 2 ) : ?>
</div><!-- .row -->
</div><!-- .carousel-item -->
<?php endif; ?>
<?php $i++; // increment the counter
endwhile;
?>
<!-- This is needed if the (<number of posts> / 3) does not equal to 3. E.g. 11 posts would require 4 rows -->
<?php if ( $i % 3 !== 0 ) : ?>
</div><!-- .row -->
</div><!-- .carousel-item -->
<?php endif; ?>
<?php endif; // end have_posts() ?>
</div>
我希望这会有所帮助,您可以看到
$i
并在代码中正确实现它。