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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-a-carouselSlideshow-in-Bootstrap-5-1.png" data-lazy- height="348" src="data:image/svg xml,” width=”541″>

Code

Step 1

Add .carousel class to create create a carousel

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-a-carouselSlideshow-in-Bootstrap-5-2.png" data-lazy- height="366" src="data:image/svg xml,” width=”553″>

Code

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-a-carouselSlideshow-in-Bootstrap-5-3.png" data-lazy- height="363" src="data:image/svg xml,” width=”551″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-a-carouselSlideshow-in-Bootstrap-5-4.png" data-lazy- height="365" src="data:image/svg xml,” width=”556″>

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.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-a-carouselSlideshow-in-Bootstrap-5-5.png" data-lazy- height="359" src="data:image/svg xml,” width=”577″>

Code

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.