动态bootstrap轮播

时间:2016-12-03 16:21:00

标签: php jquery css twitter-bootstrap

我正在尝试使用PHP动态启动bootstrap轮播。我没有使用一次滑动一张图像的普通旋转木马。我正在使用每个项目类中有多个图像的人(在我的情况下,在一个项目中有4个图像)。

Ex:http://bootsnipp.com/snippets/featured/simple-carousel

如果我使用两个查询,我可以让它工作,我想知道我是否可以在一个查询中完成。

我的代码:

<div id="Carousel" class="carousel slide" data-interval="false">
  <ol class="carousel-indicators">
    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
    <li data-target="#Carousel" data-slide-to="1"></li>
    <li data-target="#Carousel" data-slide-to="2"></li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <?php
if($query1 = $mysqli->query("SELECT * FROM posts LIMIT 0, 4")){
    while($row1 = mysqli_fetch_array($query1)){ 

?>
      <div class="col-md-3"><a href="<?php echo $row1['link'];?>"> <img class="img-thubs" src="<?php echo $row1['image'];?>" alt="<?php echo $row1['title'];?>"></a> <a href="<?php echo $row1['link'];?>">
        <h4 class="col-more-title"><?php echo $row1['title'];?></h4>
        </a> </div>
      <?php
    }
    $query1->close();

}
?>
    </div>
    <!--.item-->
    <div class="item">
      <?php

if($query2 = $mysqli->query("SELECT * FROM posts LIMIT LIMIT 5, 9")){
    while($row2 = mysqli_fetch_array($query2)){ 

?>
      <div class="col-md-3"><a href="<?php echo $row2['link'];?>"> <img class="img-thubs" src="<?php echo $row2['image'];?>" alt="<?php echo $row2['title'];?>"></a> <a href="<?php echo $row2['link'];?>">
        <h4 class="col-more-title"><?php echo $row2['title'];?></h4>
        </a> </div>
      >
      <?php
}
    $query2->close();

}
?>
    </div>
    <!--.item--> 

    <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
  <!--.Carousel--> 

</div>
<!--.carousel-inner--> 

1 个答案:

答案 0 :(得分:1)

您知道所需循环的大小。你需要2个独立的循环,外部运行两次。内部运行5次。执行单个查询以获取所有数据,然后在内部循环中获取mysqli_fetch_array($ query2)中的值;

有些事情:

 for( $i = 0; $i < 2; $i ++){
      print '<div class="item">';
      for( $z = 0; $z < 5; $z ++ ){
           $row2 = mysqli_fetch_array($query2);
           //do what ever you want with the data!!!
           print '<div class="col-md-3">';
           print '<a href="' . $row2['link'] . '">';
           print '<img class="img-thubs" src="' . $row2['image'] . '" alt="' . $row2['title'] . '"></a> ';
           print '<a href="' . $row2['link'] . '"><h4 class="col-more-title">' . $row2['title'] . '</h4></a> </div>';
      }
      print '</div>';
 }