html画像を表示するにはwitg dynamic id

Question

私はこれについて初心者です。もっと専門的な助けが必要です。問題は、私はthis pure css easy sliderを使用しようとしていますが、この例は静的画像で使用されているようです。

私の場合は私が何をしたいのか、自動的にこれらのタグにidを生成する（私はsupose）私はループのいくつかの種類を使用する必要があるので、動的に画像を表示するために

をPHPを使用していますが同じです一例ではなく、個々のIDを持つもの：

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

は、だから私は、このコードをしようとしている：

<?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(); 
?> 

しかし、それはちょうど私を見るので、それが正常に動作しないようです何度も何度も何度も同じ画像が繰り返し表示され、これらの画像が動的に表示されたときにCSSの構造が破損しました。

Answer 1

サインは、あなたがforループ、あなたの質問に共有サンプルのように、また

の必要がない、whileループを持って、あなただけの1 <div id="slider">と<figure>を必要としています。

<?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(); 
?>