Bootstrap

How to create a carousel/Slideshow in Bootstrap 5

Carousel is a dynamic presentation of content where texts and images are combined together to make things visible and accessible for the user by cycling them again and again.Carousel is used to showcase the recent or exclusive activity on a website and make it easy for the user to explore without any problem.

This article is about

  • Create a carousel
  • Carousel with caption
  • Step by Step process of creating a carousel

How to Create A Carousel

To create a carousel use .carousel class along with data-bs-ride=”carousel” attribute, then wrap it around the divs with classes .carousel-indicators to add navigation buttons, .carousel-inner to add carousel images, .carousel-control-prev to add previous slide button, .carousel-control-next to add
next slide button.

Code

<div id="cslide" class="carousel" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#cslide" data-bs-slide-to="1" class="active"></button>
    <button type="button" data-bs-target="#cslide" data-bs-slide-to="2"></button>
    <button type="button" data-bs-target="#cslide" data-bs-slide-to="3"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/1.jpg" alt="ts" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="img/2.jpg" alt="ts" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="img/3.jpg" alt="ts" class="d-block w-100">
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#cslide" data-bs-slide="prev">
    <div class="carousel-control-prev-icon"></div>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#cslide" data-bs-slide="next">
    <div class="carousel-control-next-icon"></div>
  </button>
</div>

Step 1

Add .carousel class to create create a carousel

Code

<div id="slidee" class="carousel silde" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/1.jpg" alt="fs" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="img/2.jpg" alt="ss" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="img/3.jpg" alt="ts" class="d-block w-100">
    </div>
  </div>
</div>

In above code, .carousel-inner class is used to add slides to a carousel and to add content to each slide use .carousel-item class. For CSS transition and animation effect when moving from one slide to another, add .slide class.

Step 2

Add .carousel-indicators class to add buttons in carousel:

<div class="carousel-indicators">
<button type="button" data-bs-target="#cslide" data-bs-slide-to="1"  class="active"></button>
    <button type="button" data-bs-target="#cslide" data-bs-slide-to="2"></button>
    <button type="button" data-bs-target="#cslide" data-bs-slide-to="3"></button>
  </div>

This is how you create carousel indicators.

Step 3

Add .carousel-control-prev and .carousel-control-prev-icon together to create and use a previous button to go back to the previous slide.

Add .carousel-control-next and .carousel-control-next-icon together to create and use a next button to go to the next slide.

<button class="carousel-control-prev" type="button" data-bs-target="#cslide" data-bs-slide="prev">
    <div class="carousel-control-prev-icon"></div>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#cslide" data-bs-slide="next">
    <div class="carousel-control-next-icon"></div>
  </button>

This is how the carousel next and previous slide buttons are created.

How to Create A Carousel with Caption

To add a caption to a slide just add a div with a class .carousel-caption inside the div with a class .carousel-item.

Code

<div class="carousel-inner">
    <div class="carousel-item">
      <img src="img/1.jpg" alt="fs" class="d-block w-100">
      <div class="carousel-caption">
        <h3>First Slide</h3>
        <p>This is the First Slide with Caption</p>
      </div>
    </div>
 </div>

In this way you can add captions to your carousel.

Conclusion

To create a carousel use .carousel class along with data-bs-ride=”carousel” attribute, then wrap it around the divs with classes .carousel-indicators to add navigation buttons, .carousel-inner to add carousel images, .carousel-control-prev to add previous slide button, .carousel-control-next to add
next slide button. In the above article the process of creating a carousel is explained with examples to make it easy for you to understand and create your own carousel.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.