Display multiple images from database to bootstrap carousel - php

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"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></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"><img src="assets/img/movies/<?php echo $rs['slika'] ?>" alt="Image" style="max-width:100%;"></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.