A Carousel is a slideshow component used to rotate through a series of content items or images.
An explanation of the purpose of each class used in the example above.
| Class | Description |
|---|---|
.carousel |
Starts a carousel component. |
.carousel-indicators |
Shows dot indicators to switch between slides. |
.carousel-inner |
Contains all the slide items. |
.carousel-item |
Defines each slide within the carousel. |
.carousel-control-prev |
Creates the left navigation button to go to the previous slide. |
.carousel-control-next |
Creates the right navigation button to go to the next slide. |
.carousel-control-prev-icon |
Adds a left arrow icon for previous navigation. |
.carousel-control-next-icon |
Adds a right arrow icon for next navigation. |
.slide |
Adds a sliding animation between slides. |
To add a caption to each slide, place your content inside a <div class="carousel-caption"> within each <div class="carousel-item">