Bootstrap 5Content

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.

Primary Class

.carousel

Common Use Cases

→Hero image slider
→Testimonial carousel
→Product image gallery
→Team member showcase
→Partner logo slideshow
→Feature highlight rotation

Variants & Classes

Variant	Description	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-indicators before carousel-inner`
Carousel with captions	Text overlay on each slide.	`+ carousel-caption inside carousel-item`
Auto-playing carousel	Slides advance automatically on a timer.	`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 src="/slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="/slide2.jpg" 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>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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.

FAQ

How do I show multiple items in a Bootstrap 5 carousel?

Bootstrap 5 doesn't natively support multi-item carousels. The common solution is using a wide carousel-item containing a row of cards, combined with JavaScript to slide by one card width. Libraries like Splide or Swiper provide easier multi-item support with Bootstrap styling.

How do I pause a Bootstrap 5 carousel on hover?

By default, Bootstrap carousels pause on hover. Set data-bs-pause='false' to disable this. To always pause (no auto-play), remove data-bs-ride='carousel' entirely.