如何修复此循环以使用引导轮播显示我的数据库中的图像答案

【问题标题】：How do i fix this loop to display images from my database using bootstrap carousel如何修复此循环以使用引导轮播显示我的数据库中的图像
【发布时间】：2019-09-20 16:20:13
【问题描述】：

我尝试使用引导轮播显示数据库中的图像，但我的循环似乎有问题...

<?php
  $message = "";
  if(empty($_GET['id'])) {
    $session->message("<div class='btn sm-warning'>please select an image.</div>");
    redirect_to('list_properties.php');
  } 
  $id      = $_GET['id'];
  $sql     = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
  $photos = Picture::find_by_sql($sql);
?>

从数据库中获取所有内容都是正确的，但是在幻灯片中显示图像的循环显示一个图像，并且幻灯片仅在第一张和第二张幻灯片之间循环。

<div class="container">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide mx-auto" data-ride="carousel">
  <ol class="carousel-indicators">
    <?php 
     $i=0;
    if(count($photos)){
        foreach ($photos as $photo) {
            if($i==0){
                echo '<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>';
                $i++;
            }
            else
            {
                echo '<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>';
                $i++;
            }
        }
    }
   ?>
  </ol>
  <div class="carousel-inner">
   <?php
    $a=0;
    if(count($photos)){
        foreach ($photos as $photo) {
            if($a==0){
                ?>
            <div class="carousel-item active">
           <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive"  alt="<?php echo $photo->title; ?>"/>
            <?php   
                $a++;
            }else
            ?>
    </div>
           <?php
            {
                ?>
            <div class="carousel-item">
           <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" alt="<?php echo $photo->title; ?>"/>
               <?php
                $a++;
            }
            ?>
    </div>
       <?php
        }
    }
   ?>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
</div>

【问题讨论】：

你为什么要在foreach 中增加两次$i++,$a++ 为什么不在 if..else 之后添加 data-slid-to="'.$i/'"
data-slide-to="0" 添加索引。
您绝对应该使用准备好的语句，因为您的代码对 SQL 注入是开放的。此外，您尝试过什么来调试问题？生成标记并不难调试
@M.Hemant 我这样做了，但循环还是一样

标签： php mysql bootstrap-4

【解决方案1】：

<?php
  $message = "";
  if(empty($_GET['id'])) {
    $session->message("<div class='btn sm-warning'>please select an image.</div>");
    redirect_to('list_properties.php');
  } 
  $id      = $_GET['id'];
  $sql     = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
  $photos = Picture::find_by_sql($sql);
?>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
 <?php
$i = 0; 
 foreach($photos as $photo){
        if($i == 0){
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" class="active"></li>
<?php
 $i++;  }else{
    if($i != 0){        
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" ></li>
<?php               
        } $i++;
    }
 }
?> 
  </ol>
  <div class="carousel-inner">
   <?php 
    $i = 0;  
    foreach($photos as $photo){
        if($i == 0){
    ?>
    <div class="carousel-item active">
    <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
    </div>
    <?php               
    $i++;   } else{
        if($i != 0){    
    ?>
    <div class="carousel-item">
    <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
    </div>
        <?php                           
        } $i++;
    }  
      }
    ?>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

【讨论】：