php - 显示从数据库到 Bootstrap 轮播的多个图像

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 x 4 图像到轮播，但不知道该走哪条路。

Answer 1

您需要指定一个 counter这将在每 4 次迭代后检查，以创建一个新的 <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++;
}

如果您在执行代码时遇到问题，或者您不明白我在这里所做的事情，请随时提问。