Logo
hummingbird

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Basic examples

HTML

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </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="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="hidden">Next</span>
  </button>
</div>
Indicators

HTML

<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-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>
Captions

HTML

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
      <div class="carousel-caption hidden md:block">
        <h5 class="text-lg font-semibold mb-0">First slide label</h5>
        <p class="mb-0">Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
      <div class="carousel-caption hidden md:block">
        <h5 class="text-lg font-semibold mb-0">Second slide label</h5>
        <p class="mb-0">Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
      <div class="carousel-caption hidden md:block">
        <h5 class="text-lg font-semibold mb-0">Third slide label</h5>
        <p class="mb-0">Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>
Crossfade

HTML

<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>
Autoplaying carousels

HTML

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>

When the ride option is set to true, rather than carousel, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.

HTML

<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>

Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.

HTML

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>
Autoplaying carousels without controls

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
</div>
Disable touch swiping

Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the touch option to false.

HTML

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/images/carousel-1.png" class="block w-full" alt="slide-1" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-2.png" class="block w-full" alt="slide-2" />
    </div>
    <div class="carousel-item">
      <img src="/images/carousel-3.png" class="block w-full" alt="slide-3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="hidden">Next</span>
  </button>
</div>