Carousel

Carousel cycles through slides inside a CarouselViewport. Set active_index or default_active_index, optionally enable autoplay, and add CarouselStepper for dots or arrows. Prefer manual navigation for accessibility; pause autoplay in app logic when users need control.

  • Hero banners, campaigns, and landing-page highlights
  • Product or feature tours with a small set of full-width panels
  • Image-forward galleries where one slide should dominate the viewport
  • Wrap slides in Carousel and set default_active_index or control active_index.
  • Add CarouselViewport containing one CarouselSlide per panel.
  • Add CarouselStepper for previous/next buttons and page indicators, or drive navigation via CarouselStateInjection.
Controlled index

Read and drive the active slide from application state via CarouselStateInjection.

Step 1

Connect your data

Import records from your existing tools to get started quickly.

Active slide: 1

Wrap navigation

With wrap=true, advancing past the last slide returns to the first—ideal for looping highlights.

General availability

Production-ready patterns for product teams.

Index: 0

Autoplay

Automatically advance slides on an interval—use sparingly for ambient marketing content.

Always-on support

Autoplay advances every four seconds when motion is allowed.