Question

我有一个工作的Bootstrap轮播，图像源插入HTML代码。我需要使用PHP代码从Mysql数据库加载图像（以及其他一些数据，如标题和描述）。我单独尝试了PHP代码并且它可以工作，但是当我尝试将其实现为原始HTML代码时，它不起作用。

这是Carousel HTML代码：

trap "" SIGTSTP

这是我的PHP代码（单独）：

    <div id="myCarousel" class="carousel slide carousel-fade">


    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="3" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="4" class="" contenteditable="false"></li>

    </ol>



    <div class="carousel-inner">


        <div class="item" style="">
            <img src="images/slide/slide-1.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">First Slide Title</h4>
                <p class="">
                   Description for First Slide, this First Slide.
                </p>
            </div>
        </div>


        <div class="item active">
            <img src="images/slide/slide-2.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Second Slide Title</h4>

                <p class="">
                   Description for Second Slide, this is Second Slide.
                </p>
            </div>
        </div>


        <div class="item" style="">
            <img src="images/slide/slide-3.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>


         <div class="item" style="">
            <img src="images/slide/slide-4.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>


         <div class="item" style="">
            <img src="images/slide/slide-5.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>


    </div> 


    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>


</div>

这是我的HTML + PHP代码（Together）：

    <?php


$servername = "xxxxxxxxxxx";
$username = "xxxxxxxxxxxxx";
$password = "xxxxxxxxxxxxxx";
$dbname = "xxxxxxxxxxx";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT id AS id, title AS title, imagename AS imagename, description AS description, status AS status FROM uploadslide ORDER BY id";

 $result = mysqli_query($conn, $sql);

 while($row = mysqli_fetch_assoc($result)){



?>

        <div class="item" style="">
            <div class="carousel-caption">
            <?php echo '<img src="uploads/slide/' .$row['imagename']. '" alt="" class="" /> '?>
                <h4 class=""><?php echo $row['title'] ?></h4>
                <p class="">
                   <?php echo $row['description'] ?>
                </p>
            </div>
        </div>

        <?php 

}
    mysqli_close($conn);

?>

我的页面没有轮播。我为此感到疯狂。

Answer 1

首先在数据库表中为被调用项添加一个字段。现在，对于要在该字段中首先显示的特定图像，将其设置为活动状态，然后将您的轮播设置为

 <div class="item" <?php echo $row['item']; ?>>
        <div class="carousel-caption">

这应该让它显示

从Database MySql将图像加载到Bootstrap轮播中

1 个答案: