How do i create carousel with Bootstrap5 - Carousel Auto Slider

Last updated Oct 01, 2021

What is Carousel, while developing the web applications we require to show multiple images with short space, in that scenario we use carousel. Carousel is component which will display multiple items in the given space, it will slides items on tap or auto slides the images.

In this bootstrap5 example we will create carousel with multiple items and auto slide option.

Let's get started

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Carousel Example</title>
   </head>
   
   <body>

<div style="text-align:center;">
   <div id="carouselExampleControls" class="carousel slide w-50" data-bs-ride="carousel">
       
  <div class="carousel-inner">
    <div class =" carousel-inner">
               <div class = "carousel-item ">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/langpostimg/flutter-background-service.JPG"
                     alt = "First slide">
               </div>

               <div class = "carousel-item active">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/langpostimg/Encryption_Decryption_in_Flutter2.jpg"
                     alt = "Second slide">
               </div>
               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/code.gif"
                     alt = "Third slide">
               </div>
            </div>
  </div>
  <button class="carousel-control-prev btn btn-primary" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next btn btn-primary "  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>





</div>

      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

 

Output:

 

 

Carousel Indicator

Create Carousel with Indicator

To add indicator to the carousel we will use carousel-indicators class

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Carousel Example</title>
   </head>
   
   <body>

<div style="text-align:center;">
   <div id="carouselExampleControls" class="carousel slide w-50" data-bs-ride="carousel">
 <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class =" carousel-inner">
               <div class = "carousel-item ">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/langpostimg/flutter-background-service.JPG"
                     alt = "First slide">
               </div>

               <div class = "carousel-item active">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/langpostimg/Encryption_Decryption_in_Flutter2.jpg"
                     alt = "Second slide">
               </div>
               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/code.gif"
                     alt = "Third slide">
               </div>
            </div>
  </div>
  <button class="carousel-control-prev btn btn-primary" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next btn btn-primary "  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>





</div>

      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

 

 

Carousel Fade

How to add fade animation to the carousel

To make fade effect to the carousel we just need to add carousel-fade class

 

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Carousel Example</title>
   </head>
   
   <body>

<div style="text-align:center;">
   <div id="carouselExampleControls" class="carousel carousel-fade slide w-50" data-bs-ride="carousel">
 <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class =" carousel-inner">
               <div class = "carousel-item ">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/langpostimg/flutter-background-service.JPG"
                     alt = "First slide">
               </div>

               <div class = "carousel-item active">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/langpostimg/Encryption_Decryption_in_Flutter2.jpg"
                     alt = "Second slide">
               </div>
               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://rrtutors.com/uploads/code.gif"
                     alt = "Third slide">
               </div>
            </div>
  </div>
  <button class="carousel-control-prev " type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next  "  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>





</div>

      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

Output:

 

Interval time for Carousel

 

We can add time interval for each individual carousel item by data-bs-interval="10000".

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

554 Views
Projects By category
Categories