如何使用 php 使轮播正常工作

Question

enter image description hereHere is the output 我试过这段代码，但转盘无法正常工作...第一张图片显示正确，但第二张图片显示在第一张下方而不是幻灯片中....这里是我的代码..

<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 个循环。一个知道你要画多少行的人。这将用于构建您的 ol DOM.

第二次循环您的实际 div 内容，您的 select 包含必要的信息。

 <div class="banner">
    <?php
    mysqli_set_charset($conn, 'utf8');
    $query = mysqli_query($conn, "select * from post_tbl where status='Approved' Order by pid DESC");
    ?>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <?php for ($numElements = 0; $numElements < mysqli_num_rows($query); $numElements++) : ?>
            <li data-target="#carouselExampleIndicators"
                data-slide-to="<?php echo $numElements ?>" <?php echo($numElements == 0 ? 'class="active"' : '') ?> ></li>
        <?php endfor; ?>

        <div class="carousel-inner" role="listbox">
            <?php $rows = mysqli_fetch_array($query); ?>
            <?php foreach ($rows as $row) : ?>
                <div class="carousel-item <?php echo($row == reset($rows) ? '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>
            <?php endforeach; ?>
        </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>
</div>

这应该可以正确设置您的 DOM。

如果您已经熟悉 OOP 概念，那么这会变得更有条理和受到保护，强烈建议您改为遵循该路线。

还有很多关于 sql 注入 警告的线程，所以，如果您正在考虑使用变量来动态调整您的查询，请查看那些第一

作为介绍，我可以给你留下 this thread

如何使用 php 使轮播正常工作

How to make carousel work properly with php

php

carousel