Skip to content

Bootstrap Carousel

The carousel component cycles through a series of images or content slides. This lesson covers building slides, navigation controls, indicators, and captions.

Bootstrap Carousel Overview

A carousel starts with the .carousel wrapper and a .carousel-inner container holding a series of .carousel-item elements, exactly one of which needs the .active class to display first. Bootstrap's JavaScript handles sliding transitions, autoplay timing through data-bs-ride, and touch/swipe support automatically.

Navigation is added through .carousel-control-prev and .carousel-control-next buttons, and .carousel-indicators provide clickable dots for jumping directly to a specific slide. Each slide can also include a .carousel-caption for overlaid text.

Concept Description Common Usage
.carousel-inner / .carousel-item Slide container and individual slides Wrapping each image or content block
.active class Marks the initially visible slide Required on exactly one carousel-item
.carousel-control-prev/next Previous and next navigation buttons Manual slide navigation
.carousel-indicators Clickable dots representing each slide Jumping directly to a specific slide
data-bs-ride="carousel" Enables automatic slide cycling on load Autoplaying hero image carousels

Bootstrap Carousel Example

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide one">
      <div class="carousel-caption d-none d-md-block">
        <h5>New Collection</h5>
        <p>Shop the latest arrivals.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide two">
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

data-bs-ride="carousel" on the outer element enables autoplay as soon as the page loads. Each indicator button references the carousel's id and its slide index via data-bs-slide-to, while the prev/next buttons use data-bs-slide with 'prev' or 'next' to step manually. The caption on the first slide is hidden on extra-small screens with d-none d-md-block.

Top 10 Bootstrap Carousel Examples

These are the carousel structural patterns you'll use to build sliders and image showcases.

# Example Syntax
1 Carousel wrapper <div id="c" class="carousel slide" data-bs-ride="carousel">...</div>
2 Slide container <div class="carousel-inner">...</div>
3 Individual active slide <div class="carousel-item active"><img class="d-block w-100" src="a.jpg"></div>
4 Previous control <button class="carousel-control-prev" data-bs-target="#c" data-bs-slide="prev">...</button>
5 Next control <button class="carousel-control-next" data-bs-target="#c" data-bs-slide="next">...</button>
6 Slide indicators <button data-bs-target="#c" data-bs-slide-to="0" class="active"></button>
7 Slide caption <div class="carousel-caption d-none d-md-block">...</div>
8 Fade transition variant <div class="carousel slide carousel-fade">...</div>
9 Dark controls variant <div class="carousel slide carousel-dark">...</div>
10 Disable autoplay <div class="carousel slide" data-bs-ride="false">...</div>

Best Practices

  • Always mark exactly one carousel-item as active, or the carousel won't display correctly.
  • Add meaningful alt text to every slide image, describing its content, not just 'slide'.
  • Use data-bs-interval="false" or disable autoplay for carousels containing important actions or forms.
  • Provide aria-label on indicator buttons so screen reader users understand each control.
  • Keep carousel captions concise since they often overlay directly on the image.
  • Use carousel-fade for a smoother, less jarring transition on hero banners.
  • Test carousels for keyboard accessibility, since autoplay can be disorienting for some users.

Common Mistakes

  • Forgetting the active class on any slide, leaving the carousel blank on load.
  • Mismatching data-bs-target values with the carousel's actual id.
  • Using autoplay on carousels containing critical content that users need time to read.
  • Not testing carousel images at different aspect ratios, causing layout jumps between slides.
  • Overloading captions with too much text that becomes unreadable on small screens.
  • Relying on a carousel as the only way to present important content that should be scannable without waiting.

Key Takeaways

  • Carousels cycle through carousel-item slides inside a carousel-inner wrapper.
  • Exactly one slide must have the active class to display initially.
  • Indicators and prev/next controls both use data-bs-target to reference the carousel.
  • data-bs-ride="carousel" enables autoplay; disabling it suits content-heavy slides.
  • Captions, fade transitions, and dark variants extend the base carousel pattern.

Pro Tip

For accessibility and usability, disable autoplay (data-bs-ride="false") on any carousel containing text-heavy content or calls to action, and rely on visible prev/next controls instead.

You now understand Bootstrap's carousel component. Continue to Bootstrap Modal to build dialog windows and popups.