Carousel - Lumora

Living Documentation

Carousel patterns for feature storytelling and media rotation

This page documents practical carousel variants: standard, cross-fade, and thumbnail navigation. All demos use Bootstrap carousel with keyboard and touch support.

Touch friendly Keyboard controls Auto play toggle Accessible labels

Current Slide 1 active index in hero carousel

Total Slides 3 items in primary carousel

Transitions 0 slide events observed

Auto Play On runtime playback state

1. Standard Carousel

Indicators, controls, and captions

Analytics Spotlight

Show key metrics with a focused message and clear action.

Team Collaboration

Rotate internal updates, launches, and onboarding highlights.

Campaign Performance

Surface trend cards without crowding the dashboard header.

2. Design Rules

When carousel is a good choice

Use 3 to 5 slides max for clarity.
Keep each slide focused on one message.
Use consistent image ratios so height does not jump.
Write meaningful alt text for non-decorative slides.
Provide manual controls even with auto play.
Ensure keyboard focus is visible on controls.
Pause or stop on user interaction when possible.

3. Fade Variant

Bootstrap fade transition for softer motion

Soft Transition

Fade is calmer than horizontal motion.

Visual Rhythm

Good for branded hero surfaces.

Readable Captions

Keep captions short and high contrast.

4. Thumbnail Navigation

Direct slide jumps with compact chip controls

Overview

First slide with summary content.

Breakdown

Second slide with detailed split.

Actions

Third slide with next recommended steps.

5. Production Snippet

Drop-in starter for a brand carousel

carousel-images-starter.html

<div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="hero-01.jpg" class="d-block w-100" alt="Product overview" />
      <div class="carousel-caption text-start">
        <h5>Overview</h5>
        <p>Primary message for this slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="hero-02.jpg" class="d-block w-100" alt="Team collaboration" />
    </div>
    <div class="carousel-item">
      <img src="hero-03.jpg" class="d-block w-100" alt="Campaign analytics" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" 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="#demoCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>