0

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!

1 Answer 1

1

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
}
?>
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Bro, Let me test it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.