Display multiple images from database to bootstrap carousel

Question

I have a lot of images in a DB and I want to display it in a bootstrap carousel using php.

[Problem] I am rookie with php so I hit the wall. Let me explain with code.

<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>

As you can see, carousel shows 4 images at once and another 4 and so on. In a foreach loop as it is now I get all my images at once and item active is empty.

I need to get 4 by 4 images from the DB to carousel but don't know which way to go.

Answer 1

You need to specify a counter that will check after each 4 iterations, to create a new <div class="item">...</div> element.

<?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++;
}

If you have problems implementing the code, or you don't understand what I've done here, don't hesitate to ask.