Bootstrap 4 Carousel

Bootstrap 4 Carousel

Bootstrap 4 offers a carousel component, which is also known as a slider or slideshow. The carousel is used for the dynamic representation of content using images with some text. It is used to represent a large amount of content by occupying less amount of space

Steps for creating a Carousel

  • Add .carousel class along with the .slide class to the <div> element to create a carousel layout. The .slide class adds the CSS animation and transition effect
  • Add .carousel-indicators class to the <div> element to add indicators to the carousel.
  • Add .carousel-inner class to the <div> element to add slides to the carousel.
  • Add .carousel-item class to the <div> element for specifying content of each element.
  • Add .carousel-control-prev class to the <a> element for adding previous button to the carousel.
  • Add .carousel-control-next class to the <a> element for adding next button to the carousel.
  • Add .carousel-control-prev-icon class to the <span> element which is used with .carousel-control-prev class to add the previous button icon.
  • Add .carousel-control-next-icon class to the <span> element which is used with .carousel-control-prev class to add the next button icon.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 400px;
  }
  </style>
</head>
<body>
  <h2 style="text-align: center">Bootstrap 4 Carousel</h2><br>
  <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="footer.jpg" alt="Slider1" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="slider1.png" alt="Slider2" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="onepage.jpg" alt="Slider3" width="1100" height="500">
    </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>
</body>
</html>

Output

Bootstrap 4 Carousel

Add Captions to the Slides – Bootstrap 4 also allows you to add the text or caption to your slide.

Steps for creating Captions with the Slide

Add .carousel-caption class to the <div> element to add the caption to each slide. This class is used within the .carousel-class-item class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 400px;
  }
  </style>
</head>
<body>
  <h2 style="text-align: center">Bootstrap 4 Carousel with Caption</h2><br>
  <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="footer.jpg" alt="Slider1" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Hey there!</h3>
        <p>This is the first slide</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slider1.png" alt="Slider2" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Hey there!</h3>
        <p>This is the second slide</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="onepage.jpg" alt="Slider3" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Hey there!</h3>
        <p>This is the third slide</p>
      </div>
    </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>
</body>
</html>

Output

Carousel using JavaScript – You can activate the carousel manually using JavaScript.   

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 400px;
  }
  </style>
</head>
<body>
<div class="container mt-3">
<h2>Activate Carousel with JavaScript</h2>
<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li class="item1 active"></li>
    <li class="item2"></li>
    <li class="item3"></li>
  </ul>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slider.jpg" alt="slider1" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="slider1.png" alt="slider2" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="onepage.jpg" alt="slider3" width="1100" height="500">
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#myCarousel">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</div>
<script>
$(document).ready(function(){
  // Activate Carousel
  $("#myCarousel").carousel();
  // Enable Carousel Indicators
  $(".item1").click(function(){
    $("#myCarousel").carousel(0);
  });
  $(".item2").click(function(){
    $("#myCarousel").carousel(1);
  });
  $(".item3").click(function(){
    $("#myCarousel").carousel(2);
  });
  // Enable Carousel Controls
  $(".carousel-control-prev").click(function(){
    $("#myCarousel").carousel("prev");
  });
  $(".carousel-control-next").click(function(){
    $("#myCarousel").carousel("next");
  });
});
</script>
</body>
</html>

Output

Bootstrap 4 Carousel




ADVERTISEMENT
ADVERTISEMENT