Carousel
A carousel shows several slides one at a time in one block: images, customer reviews, product screenshots. Slides are switched with arrows, the dots at the bottom or a swipe on a phone, and optionally they change by themselves.
Slides and arrows
A carousel slide wrapper with an id, inside it carousel-inner with carousel-item slides. One slide must be marked active. The arrows are buttons that point to the carousel with data-bs-target and say which way to go with data-bs-slide:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="screens" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/media/photo-800x500.jpg" class="d-block w-100" alt="A team discussing tasks">
</div>
<div class="carousel-item">
<div class="bg-primary text-white text-center py-5 fs-3">Task lists</div>
</div>
<div class="carousel-item">
<div class="bg-success text-white text-center py-5 fs-3">Weekly reports</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#screens" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#screens" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>You see a photo with arrows on both sides. Click the right arrow and the slide moves left, revealing a blue slide with text. A slide can hold anything, but usually it is an image with the d-block w-100 classes.
Indicators and captions
Indicators are the bars at the bottom, one per slide. They live in carousel-indicators, and data-bs-slide-to sets the slide number starting from zero. A slide caption goes into carousel-caption:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="reviews" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#reviews" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Review 1"></button>
<button type="button" data-bs-target="#reviews" data-bs-slide-to="1" aria-label="Review 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img src="/media/photo-800x500.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="fs-5">"Finally, all deadlines in one place"</p>
<p>Anna, project manager</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="/media/photo-800x500.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="fs-5">"We switched in one evening"</p>
<p>Oleg, developer</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>The reviews change every 3 seconds: data-bs-ride="carousel" turns on autoplay, and data-bs-interval sets the pause in milliseconds. Hover over the carousel and it stops.
Settings
| Attribute or class | What it does |
|---|---|
data-bs-ride="carousel" | Autoplay right after loading |
data-bs-interval | Pause before the next slide, 5000 by default |
carousel-fade | Slides fade in instead of sliding |
data-bs-touch="false" | Disable swiping |
data-bs-theme="dark" | Dark arrows and indicators for light slides |
Common mistake
Forgetting the active class on the first slide. Then all slides are hidden, and the carousel looks like an empty space with arrows. Exactly one carousel-item must be active, and exactly one indicator too.