Question

我有一个引导旋转木马。我每排有两列。我希望我的图像来自数据库，通过php。

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/full-slider.css">
<title>Untitled Document</title>
</head>

<body>

    <!-- Full Page Image Background Carousel Header -->
    <div id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">

         <?php 
            $query = mysql_query("select * from slides");
            while($row = mysql_fetcj_array($query)){
                $slides = $row['image'];
            ?>

            <div class="item active">

                <div class="row">
                  <div class="col-sm-6 col-xs-6"> <img src="<?php echo $slides ?>" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                  </div>

                   <div class="col-sm-6 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                     <div class="carousel-caption">This is a caption</div>
                   </div>

                 </div>
              </div>
              <?php } ?>


        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <!-- Script to Activate the Carousel -->
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>
</body>
</html>

现在的问题是我有第一个div类（项目有效），其他只是项目。当我应用我的PHP每个div得到类（项目活动）我如何在PHP中应用循环，我的HTML没有打扰和我的滑块准确运行。

Answer 1

无法评论所以会回答，对不起。

你的PHP在哪里？如果没有看到它，很难弄清楚它有什么问题。

编辑：您的代码只定义了一个项目。令人惊讶的是，旋转木马甚至可以工作。你需要关闭div

Answer 2

这样的东西？检查第一次迭代：

<?php
    $isFirst = true;

    while (image loop) {

        // echoing image start...
        echo "<img ";

        // echoing stuff
        if ($isFirst) { 
            echo "class='active'"; 
        }

        // echoing the end of image
        echo " />";

        $isFirst = false;
    }
?>

Answer 3

我不知道这是否是正确的方法。但我建议的是不要在循环中应用活动类。让DOM加载然后将其应用于使用JS（或Jquery）的类的第一个索引。

$(document).ready(function(){

    $("item")[0].addClass("active");
})

或者你可以在第一个索引的PHP代码中添加一个if

if(index==0){
  echo "<p class='item active'></p>";
}else{  
 echo "<p class='item'></p>";

}

如何动态地在bootstrap轮播中获取图像

3 个答案: