← Back to Curriculum

Bootstrap Carousel and Sliders

📚 Lesson 10 of 15 ⏱️ 40 min

Bootstrap Carousel and Sliders

40 min

Bootstrap carousels are powerful slideshow components that cycle through a series of content items, typically images but capable of displaying any HTML content. Carousels automatically handle transitions between slides with smooth animations and can be configured to auto-play, pause on hover, or be manually controlled. They're perfect for hero sections, image galleries, testimonials, or feature showcases.

Carousel structure consists of a `.carousel` container with `.carousel-inner` holding `.carousel-item` elements. The first item should have the `.active` class to be visible initially. Carousels support indicators (dots showing current slide) and control buttons (previous/next arrows) for navigation. These elements are optional but enhance user experience.

Carousel options can be controlled via data attributes or JavaScript. The `data-bs-ride="carousel"` attribute enables automatic cycling, while `data-bs-interval` controls the delay between slides. Carousels can be paused on hover using `data-bs-pause="hover"` and support keyboard navigation (arrow keys) for accessibility.

Carousel captions can be added using `.carousel-caption` within carousel items. Captions are typically hidden on smaller screens using responsive utilities like `.d-none .d-md-block` to maintain mobile usability. Captions can contain headings, paragraphs, and even buttons or links.

Carousels are fully responsive and adapt to different screen sizes automatically. Images within carousels should use responsive classes like `.d-block .w-100` to ensure proper sizing. The carousel component handles touch gestures on mobile devices, enabling swipe navigation.

Advanced carousel features include crossfade transitions (using `.carousel-fade`), multiple item displays, and programmatic control via JavaScript API. The carousel JavaScript API provides methods for controlling slide transitions, pausing, cycling, and event handling, enabling sophisticated carousel implementations.

Key Concepts

  • Carousels cycle through content items with smooth transitions.
  • Carousel structure: .carousel > .carousel-inner > .carousel-item.
  • Indicators and controls provide navigation options.
  • Carousels support auto-play, pause, and manual control.
  • Carousels are responsive and support touch gestures.

Learning Objectives

Master

  • Creating carousels with multiple slides
  • Adding indicators and navigation controls
  • Configuring carousel behavior with data attributes
  • Implementing carousel captions and responsive behavior

Develop

  • Designing engaging slideshow interfaces
  • Understanding carousel interaction patterns
  • Creating accessible carousel experiences

Tips

  • Always include .active class on first carousel-item.
  • Use data-bs-ride="carousel" for automatic cycling.
  • Add .carousel-fade for crossfade transitions instead of slide.
  • Use .d-none .d-md-block on captions to hide on mobile.

Common Pitfalls

  • Forgetting to include Bootstrap JavaScript, breaking carousel functionality.
  • Not using .active on first item, causing no visible slide.
  • Missing data-bs-target attributes on controls, breaking navigation.
  • Not optimizing images, causing slow loading and poor performance.

Summary

  • Carousels provide slideshow functionality for cycling content.
  • Carousels support indicators, controls, and captions.
  • Carousels are responsive and support touch navigation.
  • Carousels can auto-play or be manually controlled.

Exercise

Create a carousel with multiple slides, navigation arrows, and indicators.

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1" class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2" class="d-block w-100" alt="Slide 2">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+3" class="d-block w-100" alt="Slide 3">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Exercise Tips

  • Add fade transition: carousel carousel-fade for crossfade effect.
  • Control interval: data-bs-interval="5000" for 5-second delays.
  • Pause on hover: data-bs-pause="hover" to pause on mouseover.
  • Add captions: <div class="carousel-caption d-none d-md-block">...</div>.

Code Editor

Output