Bootstrap 5 Carousel

Slideshow component for cycling through images and content

🎠 What is Bootstrap Carousel?

Bootstrap carousel is a slideshow component that cycles through images, text, or custom content. It includes automatic rotation, manual controls, indicators, and captions, making it perfect for showcasing featured content, portfolios, or product galleries.


<!-- Basic Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100">
    </div>
  </div>
</div>

Basic Carousel

Basic Carousels are created with the .carousel and .slide classes, containing slides within a .carousel-inner wrapper. Each slide uses .carousel-item, with the first slide having the .active class. Images should include .d-block .w-100 for proper responsive behavior. Adding data-bs-ride="carousel" enables automatic cycling. Carousels are ideal for hero banners, image galleries, or featured content displays—providing an interactive, space-saving way to showcase multiple pieces of content sequentially.

<div id="carouselBasic" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/0d6efd/ffffff?text=Slide+1" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/198754/ffffff?text=Slide+2" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+3" class="d-block w-100">
    </div>
  </div>
</div>

Output:

🔹 Carousel with Controls

Carousel with Controls adds previous/next buttons using .carousel-control-prev and .carousel-control-next classes. These controls allow manual navigation between slides and include accessible ARIA labels and keyboard support. Icons are added with .carousel-control-prev-icon and .carousel-control-next-icon. Controls improve usability by letting users freely browse slides, pause autoplay, and navigate at their own pace—essential for content-heavy carousels in marketing sites, portfolios, or product showcases.

<div id="carouselControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/6610f2/ffffff?text=Slide+1" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/fd7e14/ffffff?text=Slide+2" class="d-block w-100">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

🔹 Carousel with Indicators

Carousel with Indicators adds interactive dots (.carousel-indicators) for direct slide navigation and position feedback. Each indicator is a button with a data-bs-slide-to attribute matching a slide index. The active indicator receives the .active class. Indicators enhance user experience by showing total slide count, current position, and enabling quick jumps—improving both usability and accessibility in multi-slide carousels used across marketing pages, image galleries, and tutorial content.

<div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/20c997/ffffff?text=Slide+1" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/0dcaf0/000000?text=Slide+2" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3" class="d-block w-100">
    </div>
  </div>
</div>

🔹 Carousel with Captions

Carousel with Captions overlays text on slides using .carousel-caption inside each carousel item. Captions can include headings, descriptive text, and call-to-action buttons. They are typically positioned at the bottom but can be customized with flex utilities. Use .d-none .d-md-block to hide captions on small screens, ensuring images remain the focus on mobile. Captions add context, improve SEO with keyword-rich text, and increase engagement in promotional or storytelling carousels.

<div id="carouselCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/6c757d/ffffff?text=Image" class="d-block w-100">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide</h5>
        <p>Description for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/adb5bd/000000?text=Image" class="d-block w-100">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second Slide</h5>
        <p>Description for the second slide.</p>
      </div>
    </div>
  </div>
</div>

🔹 Carousel Options

Carousel Options customize behavior via data attributes like data-bs-interval, data-bs-pause, and data-bs-wrap. Interval controls slide duration; pause toggles hover behavior; wrap determines whether cycling stops after the last slide. The .carousel-fade class replaces sliding with crossfade transitions. These options allow fine-tuned control over carousel interactivity, timing, and transitions—adapting the component for various use cases from subtle background animations to prominent featured content displays.

<!-- Carousel with custom interval -->
<div class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
  <!-- slides here -->
</div>

<!-- Carousel with fade effect -->
<div class="carousel slide carousel-fade" data-bs-ride="carousel">
  <!-- slides here -->
</div>

<!-- Carousel without auto-play -->
<div class="carousel slide" data-bs-ride="false">
  <!-- slides here -->
</div>

🔹 Dark Variant

Dark Variant Carousels (.carousel-dark) style controls, indicators, and captions with dark colors for light-background images. This variant ensures proper contrast and visibility, automatically adjusting all carousel elements for readability. It’s particularly useful on hero sections with light imagery, inverted color schemes, or when design requirements call for dark UI elements. The dark variant maintains full functionality while improving aesthetic integration and accessibility across diverse visual contexts.

<div id="carouselDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/f8f9fa/000000?text=Light+Background" class="d-block w-100">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselDark" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>