Bootstrap Carousel

Bootstrap Carousel Plugin

The Carousel Plugin

The Carousel plugin is a slideshow component for cycling through a series of content, built with CSS 3D transforms and JavaScript. It works with a series of images, text, or custom markup.

	Tip: Bootstrap’s JavaScript components, including the Carousel, can be included individually (e.g., carousel.js) or all at once using bootstrap.bundle.min.js (which includes Popper for dropdowns, popovers, and tooltips, but is also fine for carousels).

Carousel Example

Below is an example of a carousel with indicators, controls, and captions. (Note: The image itself is illustrative of what a slide might contain).

	Note: Carousels rely on CSS transitions and animations. While widely supported in modern browsers, very old browsers might not display the sliding effect perfectly.

How To Create a Carousel

The following example shows the HTML structure for a basic carousel with indicators, controls, and items (slides):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img_chania.jpg" class="d-block w-100" alt="Chania - First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img_chania2.jpg" class="d-block w-100" alt="Chania - Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img_flower.jpg" class="d-block w-100" alt="Flower - Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Example Explained

The outermost <div> (#myCarousel):

• Requires an id (e.g., myCarousel) for the indicators and controls to target.
• .carousel class specifies it’s a carousel.
• .slide class adds CSS transitions for the sliding effect. Omit if you want instant transitions (though not common).
• data-bs-ride="carousel" attribute makes the carousel start animating on page load. Set to data-bs-ride="false" if you want to initialize it manually or on an event.

Indicators (.carousel-indicators):

• These are the small clickable dots, typically at the bottom. In Bootstrap 5, these are <button> elements.
• data-bs-target attribute on each indicator button points to the carousel’s id.
• data-bs-slide-to attribute specifies the zero-based index of the slide to go to.
• The active indicator needs the .active class and aria-current="true".

Wrapper for slides (.carousel-inner):

• This div contains all the individual slides.
• Each slide is a div with class .carousel-item (replaces older .item class).
• One .carousel-item must have the .active class to be visible initially.
• Images within carousel items often use .d-block.w-100 to ensure they display as block elements and span the full width of the carousel item. Always include alt text for accessibility.

Left and right controls (.carousel-control-prev, .carousel-control-next):

• These are <button> elements that allow manual navigation.
• data-bs-target points to the carousel’s id.
• data-bs-slide="prev" or data-bs-slide="next" controls the slide direction.
• .carousel-control-prev-icon and .carousel-control-next-icon are styled <span> elements that create the chevron icons (no external image files needed).
• .visually-hidden text provides accessible labels for screen readers.

Add Captions to Slides

Add a <div class="carousel-caption"> within any .carousel-item to include captions. Captions can be hidden on smaller viewports using display utilities like .d-none .d-md-block (hidden by default, block display on medium screens and up).

The example above already includes captions using this structure:

<div class="carousel-item active">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide label</h5>
    <p>Caption text for the slide.</p>
  </div>
</div>

Other Carousel features include dark variants (.carousel-dark for use on light backgrounds where default white controls/captions wouldn’t be visible), crossfade transitions (.carousel-fade), and individual slide intervals via data-bs-interval.

Complete Bootstrap Carousel Reference

For a complete reference of all carousel options, methods, and events, please consult the official Bootstrap documentation on ‘Carousel’.