Simple Image Carousel using Bootstrap

An Image Carousel is a container containing a series of images which can be viewed one by one or by clicking in the specific index. The carousel generally uses CSS and JavaScript to achieve the desired output.

Follow this video for complete guidance :

Source Code :

<?php
  
  $images = array(
    'https://reeteshghimire.com.np/wp-content/uploads/2022/01/rara-lake-as-seen-from-murma-top-1536x1152.jpeg',
    'https://reeteshghimire.com.np/wp-content/uploads/2022/01/annapurna-base-camp-trekking.jpeg',
    'https://reeteshghimire.com.np/wp-content/uploads/2022/01/poonhill-trek.jpeg',
    'https://reeteshghimire.com.np/wp-content/uploads/2022/01/Langtang-Gosaikund-trekking-nepal.jpeg'
  );

?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  <style type="text/css">

    .carousel-inner div {
      height: 600px;
      object-fit: cover;
    }
  </style>

<div class="container">
  <div class="row">
  	<div class="col-md-12">
      	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <?php $loop=0; foreach($images as $im){ $loop++;?>
              <li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $loop-1;?>" class="<?php if($loop==1){ echo 'active';}?>"></li>
            <?php } ?>

          </ol>
          <div class="carousel-inner">
            <?php $loop=0; foreach($images as $im){ $loop++;?>
              <div class="carousel-item <?php if($loop==1){ echo 'active';}?>">
                <img class="d-block w-100" src="<?php echo $im;?>">
              </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>
</div>