Carousel in Bootstrap 5

Basic Carousel

Here's a basic carousel with slides only. Note the presence of the indicators and controls.

PreviousNext

<!-- Basic Carousel -->
<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <Image width={400} height={300} src="slide1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <Image width={400} height={300} src="slide2.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Carousel with Indicators

PreviousNext

<!-- Carousel with Indicators -->
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div class="carousel-inner">
    <!-- Slides -->
  </div>
  <!-- Controls -->
</div>

Carousel with Captions

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

PreviousNext

<!-- Carousel with Captions -->
<div class="carousel-item active">
  <Image width={400} height={300} src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide label</h5>
    <p>Slide description text.</p>
  </div>
</div>

Crossfade Animation

PreviousNext

<!-- Crossfade Carousel -->
<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <!-- Carousel items -->
</div>

Carousel with Dark Variant

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

PreviousNext

<!-- Dark Variant Carousel -->
<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <!-- Carousel content -->
</div>

Carousel with Different Intervals

PreviousNext

<!-- Different Intervals -->
<div class="carousel-item active" data-bs-interval="1000">
  <!-- Content with 1 second interval -->
</div>
<div class="carousel-item" data-bs-interval="2000">
  <!-- Content with 2 second interval -->
</div>
<div class="carousel-item">
  <!-- Default interval -->
</div>

Carousel without Controls

Carousel with Thumbnails

Carousel with Cards

Card Title 1

Some quick example text to build on the card title.

Card Title 2

Some quick example text to build on the card title.

Card Title 3

Some quick example text to build on the card title.

Card Title 4

Some quick example text to build on the card title.

PreviousNext

JavaScript Methods

// JavaScript Examples
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

// Go to specific slide
carousel.to(2)

// Pause carousel
carousel.pause()

// Resume cycling
carousel.cycle()

// Event listeners
myCarousel.addEventListener('slide.bs.carousel', function () {
  console.log('Slide started')
})

myCarousel.addEventListener('slid.bs.carousel', function () {
  console.log('Slide completed')
})

Accessibility

Best Practices

Customization Examples

/* Custom Carousel Styles */
.custom-carousel .carousel-control-prev-icon,
.custom-carousel .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-size: 60%;
}

.custom-carousel .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 5px;
}

.custom-carousel .carousel-caption {
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .custom-carousel .carousel-caption h5 {
    font-size: 1rem;
  }
  .custom-carousel .carousel-caption p {
    font-size: 0.875rem;
  }
}