Bootstrap carousel Examples

Bootstrap 4 Carousel

Hello Friends today in this article we will learn how to create bootstrap 4 carousel.

<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="banner1.jpg" height="350" width="100%" alt="SCHAUHAN">
    </div>
    <div class="carousel-item">
      <img src="banner2.jpg" height="350" width="100%" alt="SCHAUHAN">
    </div>
    <div class="carousel-item">
      <img src="banner3.jpg" height="350" width="100%" alt="SCHAUHAN">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Bootstrap 4 Carousel With Caption

Just Place this code under image to add caption.

<div class="carousel-caption">
  <h3>Varanasi</h3>
  <p>The Holy City Of India</p>
</div>

Bootstrap 4 Carousel With Animated Caption

For animated caption just add these file in your head section

<link href="animate.css" rel="stylesheet">
     <script src="wow.min.js"></script>
     <script>
       new WOW().init();
    </script>

and add these class in you caption heading and paragraph.

<h3 class="wow bounceInLeft">Varanasi</h3>
<p class="wow bounceInRight">The Holy City Of India</p>

Leave a Reply

avatar
  Subscribe  
Notify of