Carousel

Sliding image and content galleries

Carousels cycle through slides with transition animations. Use controls, indicators, and captions to enhance navigation.

A carousel contains .carousel-inner with .carousel-item slides. Add .carousel-control-prev and .carousel-control-next for navigation arrows.

<div class="carousel slide"
  data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" />
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" />
    </div>
  </div>
  <button class="carousel-control-prev">
  <button class="carousel-control-next">
</div>

Slide 1

.carousel .slide

Use prev/next arrows to navigate slides.

20 / 37