How do i fix this loop to display images from my database using bootstrap carousel

Question

I tried using bootstrap carousel to display images from my database but something seem to be wrong with my loop...

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