Carousel
Carousel Only
Create a default carousel using Bootstrap's .carousel
class. Use <div class="carousel slide">
to set up the carousel, and include <div class="carousel-inner">
with <div class="carousel-item">
elements for each slide.
With Controls
Add navigation controls to a Bootstrap carousel by including <button class="carousel-control-prev">
and <button class="carousel-control-next">
elements. These controls allow users to move between slides in the carousel.
With default Indicators
Add default indicators to a Bootstrap carousel by including <ol class="carousel-indicators">
with <li data-bs-target="#carouselExample" data-bs-slide-to="0">
elements for each slide. These indicators provide visual navigation for users.
Crossfade Animation
Enable crossfade animation in a Bootstrap carousel by adding the .carousel-fade
class to the <div class="carousel slide">
. This creates a smooth fade transition between slides.
With Captions
Add captions to Bootstrap carousel slides by including <div class="carousel-caption">
inside each <div class="carousel-item">
. Place your caption text within this container to provide additional information on each slide.
Dark variant carousel
Create a dark variant of a Bootstrap carousel by adding the .carousel-dark
class to the <div class="carousel slide">
. This adjusts the carousel's text and controls for better visibility on dark backgrounds.