Bootstrap 5 Carousel

Carousel is a slideshow component used to display multiple images, text, or custom content in a rotating slider format. It supports automatic sliding, manual navigation, indicators, and controls.

Bootstrap Carousel with Indicators

.carousel Defines the carousel container.
.carousel-inner Contains all the slides.
.carousel-item Each slide inside the carousel.
.carousel-indicators Dots for navigation.
.carousel-control-prev Left arrows for manual navigation.
.carousel-control-next Right arrows for manual navigation.
data-bs-ride="carousel" Enables automatic sliding.

Example

<div id="demo" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="c1.jpg" alt="Image" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="c2.jpg" alt="Image" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="c3.jpg" alt="Image" class="d-block w-100">
    </div>
  </div>

  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Try it Yourself

Carousel with Caption

You can create a carousel with captions using the built-in carousel component. Add <div class="carousel-caption"> inside <div class="carousel-item">.

Example

<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="c1.jpg" alt="Image" class="d-block w-100">
    <div class="carousel-caption">
      <h5>First Slide Caption</h5>
      <p>This is a description for the first slide.</p>
    </div>
  </div>
  <div class="carousel-item">
    <img src="c2.jpg" alt="Image" class="d-block w-100">
    <div class="carousel-caption">
      <h5>Second Slide Caption</h5>
      <p>This is a description for the second slide.</p>
    </div>
  </div>
  <div class="carousel-item">
    <img src="c3.jpg" alt="Image" class="d-block w-100">
    <div class="carousel-caption">
      <h5>Third Slide Caption</h5>
      <p>This is a description for the third slide.</p>
    </div>
  </div>
</div>

Try it Yourself

Carousel with Crossfade

You can create a carousel with a crossfade effect by adding the .carousel-fade class to the carousel container.

Example

<div id="demo" class="carousel slide carousel-fade" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="c1.jpg" alt="Image" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="c2.jpg" alt="Image" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="c3.jpg" alt="Image" class="d-block w-100">
    </div>
  </div>

  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Try it Yourself

Carousel with Different Intervals for Each Slide

You can set an individual interval for each .carousel-item using the data-bs-interval attribute. This allows different slides to have different durations before transitioning to the next slide.

Example

<div id="demo" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="2000">
      <img src="c1.jpg" alt="Image" class="d-block w-100">
       <div class="carousel-caption">
         <h5>First Slide Caption</h5>
         <p>Stays for 2 seconds.</p>
       </div>
    </div>
    <div class="carousel-item" data-bs-interval="4000">
      <img src="c2.jpg" alt="Image" class="d-block w-100">
      <div class="carousel-caption">
         <h5>Second Slide Caption</h5>
         <p>Stays for 4 seconds.</p>
       </div>
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="c3.jpg" alt="Image" class="d-block w-100">
      <div class="carousel-caption">
         <h5>Third Slide Caption</h5>
         <p>Stays for 3 seconds.</p>
       </div>
    </div>
  </div>

  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Try it Yourself