Question

我在数据库中有很多图像，我想使用php在bootstrap轮播中显示它。

[问题] 我是php的菜鸟，所以我碰壁了。让我用代码解释一下。

<div class="carousel-inner">
  <div class="item active">
    <div class="row">
      <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
      <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
      <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
      <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
    </div><!--.row-->
  </div><!--.item-->  

  <?php
  $pdo = connect();
  // display the list of all members in table view
  $sql = "SELECT * FROM filmovi";
  $query = $pdo->prepare($sql);
  $query->execute();
  $list = $query->fetchAll();
  ?> 

  <div class="item">
    <div class="row">
      <?php foreach($list as $rs) { ?>    
        <div class="col-md-3"><a href="#" class="thumbnail"><img src="assets/img/movies/<?php echo $rs['slika'] ?>" alt="Image" style="max-width:100%;"></a></div>
      <?php } ?>
    </div><!--.row-->
  </div><!--.item-->
</div>

如您所见，旋转木马一次显示4张图像，另外4张图像，依此类推。在foreach循环中，我现在可以立即获取所有图像，并且项目活动为空。

我需要从数据库到旋转木马的4×4图像，但不知道要走哪条路。

Answer 1

您需要指定在每4次迭代后检查的counter，以创建新的<div class="item">...</div>元素。

<?php 
$counter = 0; //Set the counter to zero
  foreach ($list as $single_list){
    if($counter % 4 == 0) { // On every fourth iteration create a new item and row DIV
      echo '<div class="item"><div class="row">';
    }

      ... your code to output the images ...

    if($counter % 4 == 0) {
      echo '</div></div>'; // Close the row and item DIV
    }
$counter++;
}

如果您在实施代码时遇到问题，或者您不明白我在这里做了什么，请不要犹豫。

显示从数据库到引导轮播的多个图像

1 个答案: