带有WP_QUERY的旋转木马滑块,可在每张幻灯片上显示3个帖子

时间:2020-07-26 作者:Manohar Bhatia

我试图创建一个引导旋转木马,在每张幻灯片上显示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>
为了让它按照我的需要工作,我需要做哪些更改。

提前谢谢。

1 个回复
最合适的回答,由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 并在代码中正确实现它。