Bootstrap Carousel — Image Sliders and Slideshows

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Bootstrap Carousel. 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 previous/next controls, indicator dots, and autoplay with configurable intervals.

What You'll Learn

You will learn how to build image carousels, add controls and indicators, include captions, configure autoplay and crossfade transitions, and make carousels accessible.

Why It Matters

Carousels showcase multiple pieces of content in limited space. DodaTech's product landing page uses a carousel to highlight Doda Browser, DodaZIP, and Durga Antivirus Pro features.

Real-World Use

The Doda Browser homepage uses a full-width carousel with captions to showcase feature highlights, with autoplay paused on hover for Accessibility.

flowchart LR
    A[Modals] --> B[Carousel]
    B --> C[Slides]
    B --> D[Controls]
    B --> E[Indicators]
    B --> F[Captions]
    B --> G[Options]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Carousel

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Third slide">
    </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>

Expected output: A slideshow with three images, previous/next arrow buttons, and automatic cycling.

Carousel with Indicators

<div id="carouselIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true"></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?text=Slide+1" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Expected output: A carousel with clickable indicator dots below the slides showing the current slide position.

Carousel with Captions

<div id="carouselCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button data-bs-target="#carouselCaptions" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#carouselCaptions" data-bs-slide-to="1"></button>
    <button data-bs-target="#carouselCaptions" data-bs-slide-to="2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400?text=Doda+Browser" class="d-block w-100" alt="Doda Browser">
      <div class="carousel-caption d-none d-md-block">
        <h5>Doda Browser</h5>
        <p>Fast, private, and secure browsing experience.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=DodaZIP" class="d-block w-100" alt="DodaZIP">
      <div class="carousel-caption d-none d-md-block">
        <h5>DodaZIP</h5>
        <p>Compress and extract files with ease.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Durga+Antivirus" class="d-block w-100" alt="Durga Antivirus">
      <div class="carousel-caption d-none d-md-block">
        <h5>Durga Antivirus Pro</h5>
        <p>Advanced protection against malware and threats.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#carouselCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#carouselCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Expected output: A carousel with captions overlaid on each slide, hidden on small screens via d-none d-md-block.

Crossfade Transition

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

Expected output: Slides fade into each other with a crossfade transition instead of sliding horizontally.

Carousel Options

<!-- No autoplay -->
<div id="carouselNoAutoplay" class="carousel slide" data-bs-ride="false">
  <!-- slides here -->
</div>

<!-- Custom interval (3 seconds) -->
<div id="carouselCustomInterval" class="carousel slide" data-bs-interval="3000">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">First slide (5s)</div>
    <div class="carousel-item" data-bs-interval="2000">Second slide (2s)</div>
    <div class="carousel-item">Third slide (default)</div>
  </div>
</div>

<!-- Pause on hover -->
<div id="carouselPause" class="carousel slide" data-bs-pause="hover">
  <!-- slides here -->
</div>

Expected output: Carousels with different autoplay configurations. Individual slides can have custom intervals using data-bs-interval on each carousel-item.

Common Mistakes

1. Missing w-100 on Images

Images without w-100 and d-block classes may not fill the carousel width, leaving gaps on the sides.

2. Not Making Captions Responsive

Captions with d-none d-md-block are hidden on mobile by default. Without responsive classes, captions may overflow on small screens.

3. Autoplay Without Accessibility

Autoplaying carousels can cause motion sickness. Adding data-bs-pause="hover" allows users to pause by hovering.

4. Forgetting to Set aria-current="true"

The active indicator button needs aria-current="true" for accessibility. Bootstrap does not always add this automatically.

5. Using Images That Are Too Large

Large carousel images increase page load time. Optimize images to the display size and use loading="lazy" where appropriate.

Practice Questions

What class enables crossfade transitions? carousel-fade on the carousel container changes slide transitions from sliding to fading.
How do you add navigation dots to a carousel? Add a carousel-indicators div with buttons pointing to each slide via data-bs-slide-to.
What attribute controls the autoplay interval? data-bs-interval on the carousel element or on individual carousel-item elements (in milliseconds).
How do you prevent a carousel from auto-cycling? Set data-bs-ride="false" on the carousel element.
How do you add text captions to carousel slides? Add a carousel-caption div inside each carousel-item, typically with d-none d-md-block for responsive hiding.

Challenge

Build a product showcase carousel with three slides, each containing a product image, title, description, and a "Learn More" button in the caption. Use crossfade transitions and indicators.

FAQ

Can a carousel contain content other than images?

Yes. Carousel items can contain any HTML content, including text, videos, buttons, forms, and embedded components.

How do I control the carousel with JavaScript?

Use bootstrap.Carousel.getOrCreateInstance(element).next(), .prev(), .to(index), or .pause().

Does the carousel support touch swiping?

Yes. Bootstrap 5 carousel supports touch swipe on mobile devices for navigating between slides.

Can I have multiple carousels on one page?

Yes. Each carousel needs a unique id for its controls and indicators to reference.

How do I change the transition speed?

Override the --bs-carousel-transition CSS custom property or the $carousel-transition Sass variable.

Mini Project

Build a hero section for a landing page with a full-width carousel showing three feature highlights. Each slide has a background image, a headline, a subtitle, and a call-to-action button. Use crossfade and pause on hover.

What's Next

Learn Accordion for collapsible content panels. Then explore Tooltips and Popovers for hover information.

← Previous Bootstrap Modals — Dialog and Overlay Components Next → Bootstrap Accordion — Collapsible Content Panels

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap