Bootstrap 5 Carousel
The Bootstrap 5 carousel is a slideshow component for cycling through images, slides, or other content. It supports auto-play, keyboard navigation, touch/swipe on mobile, custom indicators, and captions. Bootstrap 5's carousel works without jQuery.
Bootstrap class
.carouselCommon use cases
- Hero image slider
- Testimonial carousel
- Product image gallery
- Team member showcase
- Partner logo slideshow
- Feature highlight rotation
Variants and classes
| Variant | Description and classes |
|---|---|
| Image carousel with controls | Standard sliding image carousel with prev/next buttons.carousel slide + carousel-inner + carousel-item + carousel-control-prev/next |
| Carousel with indicators | Dot indicators showing current slide position.carousel slide + carousel-indicators |
| Carousel with captions | Text overlay on each slide.carousel-item + carousel-caption |
| Auto-playing carousel | Slides advance automatically on a timer.carousel slide + data-bs-ride="carousel" + data-bs-interval="4000" |
| Fade transition | Fade instead of slide between items.carousel carousel-fade slide |
Code example
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img width="1200" height="500" src="https://picsum.photos/seed/cb-slide-1/1200/500" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img width="1200" height="500" src="https://picsum.photos/seed/cb-slide-2/1200/500" class="d-block w-100" alt="Slide 2">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>Live examples
Image Carousel
Three slides with indicators, captions and working previous and next controls. Auto-plays until you interact.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Testimonial quote carousel with avatar
- Multi-item visible carousel (show 3 cards)
- Full-screen hero carousel with overlay text
- Logo strip auto-scrolling carousel
- Before/after image comparison slider
Best practices
Use carousels sparingly on marketing pages
Studies consistently show image carousels on homepages hurt conversions, only the first slide gets significant attention. Use a carousel for testimonials or galleries where rotation adds value. Don't use it as your hero.
Always include alt text on carousel images
Each carousel-item image needs a meaningful alt attribute. Carousels are frequently built with empty alt text. This fails accessibility and loses SEO value from image indexing.
Test touch/swipe on real mobile devices
Bootstrap 5's carousel supports touch swipe natively. Test on iOS Safari and Android Chrome to verify swipe behaviour, particularly for multi-item carousels that may conflict with horizontal page scroll.