How to show html images witg dynamic id - php

Question

I'm kind of newbie on this and I need some more expert help. The thing is, I'm trying to use this pure css easy slider but the example seems to be used with static images.
In my case I'm using php to dynamically show the images so I need to use some kind of loop (I supose) to automatically generate the id's for these tags
What I want to do is the same thing at the example but with individual ids:
<img id="img-1" src="img.jpg" alt>
<img id="img-2" src="img.jpg" alt>
<img id="img-3" src="img.jpg" alt>
<img id="img-4" src="img.jpg" alt>
<img id="img-5" src="img.jpg" alt>
So I'm trying with this code:
<?php
$categories = $conexion->query("SELECT COUNT(id) AS total,id,icon,name,image FROM categories ORDER BY id LIMIT 8");
while($row = $categories->fetch_array()) {
$id = $row['id'];
$image = $row['image'];
$name = $row['name'];
$total = $row['total'];
echo '<div id="slider">';
for($i = 0; $i <= $total; $i++) {
echo '<figure>
<img class="ns-img" id="img-'.$i.'" src="'.$image.'">
</figure>';
}
echo '</div>';
}
$categories->close();
?>
But seems that it doesn't work properly because it just show me the same first image over and over again, and the css structure just broke when these images are dynamically showed :C What could I do?

Answer 1

Sine you have a while loop, there is no need for the for loop
Also as in the sample you shared in your question, you only need 1 <div id="slider"> and <figure>. So you need to move them out of your loop
Your final code should look something like this:
<?php
$categories = $conexion->query("SELECT COUNT(id) AS total,id,icon,name,image FROM categories ORDER BY id LIMIT 8");
$i = 1;
echo '<div id="slider"><figure>';
while($row = $categories->fetch_array()) {
$id = $row['id'];
$image = $row['image'];
$name = $row['name'];
$total = $row['total'];
echo '<img class="ns-img" id="img-'.$i.'" src="'.$image.'">';
$i++;
}
echo '</figure></div>';
$categories->close();
?>