使用 PHP 创建具有动态内容的 Bootstrap 轮播

Posted 2023-03-05

【中文标题】使用 PHP 创建具有动态内容的 Bootstrap 轮播

【英文标题】：Create Bootstrap carousel with dynamic content using PHP

【发布时间】：2021-06-23 04:17:26

【问题描述】：

我正在创建一个 Wordpress 网站并尝试使用 Bootstrap 5 轮播，该轮播在网站上最新的博客文章之间轮换。 （动态内容。）

它可以工作，但是帖子是垂直堆叠的，而不是三列对齐的。 （见下文。）

有没有办法让内容按原样拉入，但在三列中彼此相邻？ 任何帮助将不胜感激，谢谢。

                <div class="row justify-content-center">
                    <div class="col-12">
                        <div id="carouselExampleIndicators" class="carousel slide animatedParent animateOnce" data-bs-ride="carousel">
                            <div class="carousel-inner animated fadeIn pb-5">
                                <div class="carousel-inner">

                                    <?php
                                    $brandPosts = new WP_Query('cat=3&posts_per_page=9&orderby=date');

                                    if ($brandPosts->have_posts()) 

                                        $counter = 0;
                                        $firstLoop = true;

                                        while ($brandPosts->have_posts()) 
                                            $brandPosts->the_post();

                                            if (0 === $counter) 
                                                ?>
                                                <div class="row carousel-item <?php echo $firstLoop ? 'active' : ''; ?>">
                                                <?php
                                            
                                            ?>
                                                    <div class="col-4">
                                                        <a href="<?php the_permalink(); ?>">
                                                            <img src="<?php the_post_thumbnail_url(); ?>"  class="img-fluid mb-2">
                                                        </a>
                                                        <a href="<?php the_permalink(); ?>"><h3 class="mb-0"><?php the_title(); ?></h3></a>
                                                        <p><?php echo excerpt(16); ?></p>
                                                    </div>    
                                            <?php
                                            ++$counter;
                                            $firstLoop = false;

                                            if ($counter === 3) 
                                                $counter = 0;
                                                ?> </div> <?php
                                            
                                        
                                    

                                    wp_reset_postdata();
                                    ?>
                                </div>
                            </div>    
                        </div>
                    </div>
                </div>

【参考方案1】：

1- 您必须从轮播项目类附近的 while 循环中删除行类 2- 在 carousel-inner 之后创建一个 div 并为其设置行类。 3-还可以改进代码，将您的查询编写为图像。

祝你好运

https://i.stack.imgur.com/6gCLD.jpg