Load Div HTML code inside PHP with Condition

I am getting images from database and want display that images in slider using HTML and PHP code. I have HTML code for sample slider is like below

  <div class="carousel-inner">
    <div class="item active">
     <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
      <div class="carousel-caption">
        One Image
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
      <div class="carousel-caption">
        Another Image
      </div>
    </div>
     <div class="item">
      <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
      <div class="carousel-caption">
        Another Image
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
    </div>
  </div>
</div>

Its working fine but instead use Placeholder images, I want my images which I am getting from database like below PHP code

 <?php 

 $i= 0; 

 if(!empty($images)){ foreach($images as $image){ $i++;

    echo $image->title;
    echo $image->file_name;
     }
 }



 ?>

I want for first image and then for all other images. I am new in PHP and so confused how I can do it, Let me know if any PHP expert can help me for do it. Thanks!

Answer

It is pretty simple: you have to loop through the images and print the carousel div for each image inside the loop:

<?php
if (!empty($images)) {
?>
    <div class="carousel-inner">
        <?php
        $active = 1;
        foreach ($images as $image) {
        ?>
            <div class="item <?php if ($active == 1) echo "active"; ?>">
                <img class="img-responsive" src="<?php echo $image->title; ?>" alt="...">
                <div class="carousel-caption">
                    <?php echo $image->file_name; ?>
                </div>
            </div>
        <?php
            $active++;
        }
        ?>
    </div>
    <!-- Controls: Add them inside the condition: if(!empty($images) -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
<?php
}
?>

Advertisement

Answer