使用 PHP 創建具有動態內容的引導輪播

Question

我正在創建一個 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(); ?>" alt="<?php the_title(); ?>" 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>

Answer 1

1-您必須將行 class 從輪播項目 class 附近的 while 循環中刪除 2- 在 carousel-inner 之后創建一個 div 並將行 class 設置為它。 3-還改進代碼將您的查詢寫為圖像。

祝你好運

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