Carousel

@summonware/ui · carousel · P2 · Core UI

Usage

A scroll-snap track with prev/next controls and dot indicators — built on native CSS scroll-snap rather than a JS position/transform loop, so it inherits smooth momentum scrolling and touch behaviour from the browser instead of reimplementing it.
import { Carousel } from '@summonware/ui';

Best practices

DoKeep every slide the same height. Scroll-snap tracks read as broken when slide 2 is twice the height of slide 1.
Don'tAuto-advance a carousel that contains a call to action or anything the user might be reading — a slide changing under an active reader is a well-documented usability failure, not a style choice.

Examples

Common configurations, variations and states.

Basic carousel

First slide
Second slide
Third slide
Drag, scroll, or use the arrows/dots — all three work.

Reference variants

3 of 7 labels from the reference are demonstrated above.
Basic CarouselCarousel ControlsCarousel IndicatorsCarousel CrossfadeCarousel with CaptionsDark variantDisable touch swiping - Mobile only

Where it appears

Used on 3 catalogued screens, including application-user-card, application-user-profile-social, widget-gallery.