如何使用 php 使 carousel 正常工作

Question

我尝试过此代码但轮播无法正常工作的输出...第一张图像显示正确但第二张显示在第一个图像下方而不是在幻灯片中...这是我的代码..

<div class="banner">

<?php

mysqli_set_charset($conn, 'utf8');

$query=mysqli_query($conn,"select * from post_tbl where status='Approved' Order by pid DESC");

while($row=mysqli_fetch_array($query))

{

?>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">

            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>

        </ol>

        <div class="carousel-inner" role="listbox">

            <div class="carousel-item active">

                <div class="carousel-caption">

                    <h3><?php echo $row['title']; ?>

                    </h3>

                    <div class="read">

                        <a href="single.html" class="btn btn-primary read-m">Read More</a>

                    </div>

                </div>

            </div>

        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

            <span class="carousel-control-next-icon" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </a>

    </div>

<?php } ?>

</div>

Answer 1

您将需要 2 个循环。一个知道你要画多少行。这将用于构建您的olDOM。第二个循环您的实际div内容，其中select包含必要的信息。&nbsp;<div class="banner">&nbsp; &nbsp; <?php&nbsp; &nbsp; mysqli_set_charset($conn, 'utf8');&nbsp; &nbsp; $query = mysqli_query($conn, "select * from post_tbl where status='Approved' Order by pid DESC");&nbsp; &nbsp; ?>&nbsp; &nbsp; <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">&nbsp; &nbsp; &nbsp; &nbsp; <?php for ($numElements = 0; $numElements < mysqli_num_rows($query); $numElements++) : ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carouselExampleIndicators"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-slide-to="<?php echo $numElements ?>" <?php echo($numElements == 0 ? 'class="active"' : '') ?> ></li>&nbsp; &nbsp; &nbsp; &nbsp; <?php endfor; ?>&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-inner" role="listbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php $rows = mysqli_fetch_array($query); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php foreach ($rows as $row) : ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item <?php echo($row == reset($rows) ? 'active' : '') ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3><?php echo $row['title']; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="read">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="single.html" class="btn btn-primary read-m">Read More</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endforeach; ?>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-control-prev-icon" aria-hidden="true"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Previous</span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-control-next-icon" aria-hidden="true"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Next</span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div></div>这应该正确设置您的 DOM。如果您已经熟悉 OOP 概念，这将变得更有条理和受到保护，并且强烈建议您遵循该路线。还有很多关于sql 注入警告的线程，因此，如果您正在考虑使用变量来动态调整您的查询，请先查看这些