How to Build a Carousel in Bootstrap 5

Bootstrap 5's carousel component cycles through images, text, or custom slide content. It provides previous and next controls, optional indicators, touch gestures, transitions, and a JavaScript API.

Carousels can be difficult to use when they move automatically or hide important content. Keep essential information outside the slideshow, make manual controls easy to find, and avoid autoplay unless users can pause it.

Create a basic carousel

Every carousel needs a unique id, a carousel-inner wrapper, and one carousel-item marked active. If no item is active, nothing is displayed. The controls must target the same carousel ID.

<div id="featureCarousel"
     class="carousel slide"
     aria-label="Product features">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="p-5 bg-primary text-white">
        <h2>Fast setup</h2>
        <p>Connect your account and start in minutes.</p>
      </div>
    </div>

    <div class="carousel-item">
      <div class="p-5 bg-success text-white">
        <h2>Clear reports</h2>
        <p>Review the information that matters most.</p>
      </div>
    </div>

    <div class="carousel-item">
      <div class="p-5 bg-dark text-white">
        <h2>Team access</h2>
        <p>Share work with the right collaborators.</p>
      </div>
    </div>
  </div>

  <button class="carousel-control-prev"
          type="button"
          data-bs-target="#featureCarousel"
          data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous slide</span>
  </button>

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

Text slides make the structure easy to test. For an image carousel, place your own img inside each carousel-item, use class="d-block w-100", and write meaningful alternative text unless the image is purely decorative.

Add slide indicators

Indicators let users jump directly to a slide. Put them before carousel-inner and make every data-bs-target match the carousel ID. Slide numbers are zero-based.

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

Class	Purpose
carousel	Defines the component
slide	Adds the slide transition
carousel-inner	Wraps all slides
carousel-item	Defines one slide
active	Makes the initial slide visible
carousel-indicators	Wraps direct slide selectors
carousel-control-prev	Moves to the previous slide
carousel-control-next	Moves to the next slide

Add captions to image slides

Place carousel-caption inside the relevant carousel-item. The responsive display utilities below hide the caption on very narrow screens and show it from the medium breakpoint upward.

<div class="carousel-item active">
  <!-- Add your image here. -->
  <div class="carousel-caption d-none d-md-block">
    <h2 class="h5">First slide title</h2>
    <p>A concise description of what the image shows.</p>
  </div>
</div>

Check color contrast between captions and every image. A translucent background behind caption text can make it readable across light and dark areas.

Use a crossfade transition

Add carousel-fade to fade between items instead of sliding horizontally:

<div id="featureCarousel"
     class="carousel slide carousel-fade">
  ...
</div>

Bootstrap's animation follows the user's reduced-motion preference. Avoid adding a competing custom animation that ignores that preference.

Configure autoplay carefully

Add data-bs-ride="carousel" to start cycling on page load:

<div id="featureCarousel"
     class="carousel slide"
     data-bs-ride="carousel">
  ...
</div>

Autoplaying content can make reading and interaction difficult. If autoplay is necessary, provide a visible pause control and do not use the carousel as the only place where essential information appears. Bootstrap pauses automatic cycling while the browser tab is not visible.

Set a per-slide interval with data-bs-interval on a carousel item:

<div class="carousel-item active" data-bs-interval="8000">
  ...
</div>
<div class="carousel-item" data-bs-interval="12000">
  ...
</div>

Use enough time for readers to understand each slide. More content should receive a longer interval.

Initialize and control the carousel with JavaScript

Manual initialization is useful when the carousel does not autoplay or when you need specific options:

const element = document.getElementById('featureCarousel');

const carousel = bootstrap.Carousel.getOrCreateInstance(element, {
  interval: 8000,
  keyboard: true,
  pause: 'hover',
  touch: true,
  wrap: false
});

You can then control the instance:

carousel.next();
carousel.prev();
carousel.to(2);
carousel.pause();
carousel.cycle();

Do not manually initialize the same carousel when data-bs-ride="carousel" is already initializing it on page load.

Common carousel problems

No slide is visible

Make sure exactly one initial carousel-item has the active class.

Controls do nothing

Verify that Bootstrap's JavaScript bundle is loaded and each control's data-bs-target matches the carousel's unique ID.

Slides change height

Bootstrap does not normalize slide dimensions. Crop images consistently or apply an aspect ratio and object-fit: cover so the layout does not jump as slides change.

Controls disappear over an image

Check contrast across all slides. Use a background, shadow, or custom control style that remains visible without obscuring the content.

Accessibility checklist

• Give the carousel an accessible label that identifies its subject.
• Keep visible previous and next controls with screen-reader labels.
• Give every indicator an accurate slide label.
• Write useful image alternative text and avoid repeating the caption verbatim.
• Provide a pause option for moving content.
• Do not nest one carousel inside another.
• Keep important content available outside the slideshow.

You can build and test the example in one of these free HTML editors or compare Bootstrap with other popular CSS frameworks. For every option, event, and method, see the official Bootstrap carousel documentation.