Carousel
Basic example
Here is a basic example of a carousel with three slides. We recommend using <button>
elements, but you can also use <a>
elements with role="button".
Indicators
You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.
Captions
You can add captions to your slides with the .carousel-caption
element within any .carousel-item
.
Crossfade
Add .carousel-fade
to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add .bg-body
or some custom CSS to the .carousel-items
for proper crossfading.
Autoplaying carousels
You can make your carousels autoplay on page load by setting the ride
option to carousel
. Autoplaying carousels automatically pause while hovered with the mouse.