Carousel

Introduction

A carousel is a slideshow component for cycling through a series of images or content, such as a hero banner on a landing page. Bootstrap's carousel is built with CSS 3D transforms and a small amount of JavaScript, and it supports touch swiping on mobile devices out of the box. In this lesson you will build a complete carousel step by step: the slide wrapper, indicators, controls, captions, and the options that control how it auto-cycles.

Basic Carousel Structure

Every carousel needs a wrapping .carousel element with a unique id, a .carousel-inner container, and one or more .carousel-item elements inside it. Exactly one .carousel-item must carry the .active class, or nothing will show.

<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide-1.jpg" class="d-block w-100" alt="Mountain landscape at sunrise">
    </div>
    <div class="carousel-item">
      <img src="slide-2.jpg" class="d-block w-100" alt="City skyline at night">
    </div>
    <div class="carousel-item">
      <img src="slide-3.jpg" class="d-block w-100" alt="Beach with palm trees">
    </div>
  </div>
</div>

Adding Indicators

Indicators are the small clickable dots at the bottom of the carousel that let users jump directly to a slide. Each <button> needs data-bs-target pointing to the carousel's id and data-bs-slide-to with the zero-based slide index. The button matching the active slide should carry class="active" and aria-current="true".

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

Previous/Next Controls

The left and right arrow controls are two <button> elements with data-bs-target pointing to the carousel and data-bs-slide set to "prev" or "next". Each includes a visually hidden .visually-hidden span so screen reader users hear "Previous" or "Next" instead of nothing.

<button class="carousel-control-prev" type="button"
        data-bs-target="#mainCarousel" 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="#mainCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

Captions

Add a .carousel-caption element inside a .carousel-item to overlay a heading and short text on top of the slide. Captions are hidden below the md breakpoint by default (d-none d-md-block) so they do not clutter small screens.

<div class="carousel-item active">
  <img src="slide-1.jpg" class="d-block w-100" alt="Mountain landscape at sunrise">
  <div class="carousel-caption d-none d-md-block">
    <h5>First Slide Label</h5>
    <p>Some representative text for the first slide.</p>
  </div>
</div>

Controlling Auto-Cycling

Adding data-bs-ride="carousel" to the root element starts auto-cycling as soon as the page loads. Use data-bs-ride="true" instead if you want it to start only after the first manual interaction. Each slide accepts its own data-bs-interval (in milliseconds) to override the default 5000ms timer, and data-bs-touch="false" disables swipe gestures.

<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="slide-1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="slide-2.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Crossfade Transition

By default slides transition with a horizontal slide animation. Add the .carousel-fade class to the root element to crossfade slides in and out instead.

<div id="fadeCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <!-- carousel-inner and slides as usual -->
</div>

Dark Variant

Add .carousel-dark to invert the controls, indicators, and captions to dark text/icons for use on lighter background images.

<div id="darkCarousel" class="carousel slide carousel-dark" data-bs-ride="carousel">
  <!-- indicators, inner, controls -->
</div>

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

The carousel component lets you build an interactive slideshow using only HTML data attributes, with Bootstrap's JavaScript handling the sliding, indicators, and touch gestures behind the scenes. Next, you will learn about tooltips and popovers — two lightweight components for surfacing extra information on hover or click.