我如何解决此循环以使用Bootstrap轮播显示我数据库中的图像 [英] How do i fix this loop to display images from my database using bootstrap carousel

问题描述

我尝试使用引导轮播来显示数据库中的图像，但是循环似乎出了点问题……

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

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

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

The fetch is all correct from the database but the loop displaying the images in the slide displays one image and the slide loops between the first and second slide only.

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

推荐答案

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

这篇关于我如何解决此循环以使用Bootstrap轮播显示我数据库中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！