Skip to content

Bootstrap Carousel Explained — Image Sliders and Slideshows

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Carousel Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap carousel is a slideshow component for cycling through images or content slides, with controls, indicators, captions, and configurable autoplay behavior.

What You'll Learn

  • Carousel structure
  • Controls and indicators
  • Captions overlays
  • Crossfade animation
  • Autoplay configuration

Why It Matters

Carousels showcase featured content (products, testimonials, images) in a compact space. Bootstrap handles touch/swipe on mobile and keyboard navigation.

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/1200x400/0070f3/ffffff?text=Slide+1" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1200x400/28a745/ffffff?text=Slide+2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1200x400/dc3545/ffffff?text=Slide+3" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third Slide</h5>
        <p>Caption only visible on medium screens and up.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" 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="#heroCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<!-- Crossfade carousel -->
<div id="fadeCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x300/ff6600" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Expected output: A slideshow with indicators, prev/next controls, captions on slides 1 and 3, and a crossfade carousel below.

← Previous Bootstrap Accordion Explained — Collapsible Content Sections Next → Bootstrap Alerts Explained — Feedback Messages

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap