Carousels
Learn how to implement carousels using Bootstrap.
We'll cover the following...
The carousel is a slideshow for cycling through a series of content. It is built with CSS 3D transforms and a bit of JavaScript. We might encounter carousels when we visit websites, especially e-commerce sites.
Carousels are very attractive and catch the user’s attention. Implementing a carousel using Bootstrap is incredibly easy. Let’s see how we can build carousels.
Layout
We can build a carousel using the following layout.
Press + to interact
<div class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active "><img src="..." class="d-block w-100"></div><div class="carousel-item"><img src="..." class="d-block w-100"></div><div class="carousel-item"><img src="..." class="d-block w-100"></div></div></div>
In the code above, we have a parent <div> with .carousel and .slide classes, and a data-bs-ride argument with the .carousel value. Inside that <div>, we have our content in the .carousel-inner class. The first slide has a ...