Carousel View Transitions

The carousel-wc component supports two display modes. By default it uses scroll-snap for a native horizontal scroll experience. When a data-transition attribute is set and the browser supports the View Transitions API, it switches to a stacked-grid layout where slide changes are animated with CSS view transitions.

Fade Transition

Cross-fade between slides. The outgoing slide fades out while the incoming slide fades in.

Twilight Sky

A smooth cross-fade transition between content panels.

Emerald Forest

Rich green tones evoking a lush canopy overhead.

Sunset Amber

Warm orange hues fading gently between slides.

Berry Dusk

Deep magenta gradients with a soft transition feel.

Slide Transition

Directional slide animation. Content slides left when advancing and right when going back, matching the navigation direction.

Deep Ocean

Slides in from the right as you move forward.

Teal Lagoon

Directional awareness creates a natural flow.

Golden Hour

Warm yellows sliding across the viewport.

Crimson Dawn

Bold reds anchoring the final slide position.

Scale Transition

The outgoing slide scales down while the incoming slide scales up, creating a zoom-like depth effect.

Nebula Violet

Scale transitions add a sense of depth to slide changes.

Spring Meadow

Fresh greens zooming into focus.

Desert Sand

Earthy tones expanding to fill the frame.

Default: Scroll-Snap (No Transition)

Without data-transition, the carousel uses native scroll-snap. Swipe or drag to navigate. This is the progressive enhancement baseline and works without the View Transitions API.

Slate

Native horizontal scroll with snap points.

Storm

Smooth momentum scrolling on touch devices.

Graphite

Works in every browser, no API required.

Charcoal

The reliable fallback for all environments.
Browser support and progressive enhancement: View Transitions (document.startViewTransition) are required for the fade, slide, and scale modes. In browsers without support, the carousel automatically falls back to scroll-snap behavior regardless of the data-transition attribute. All carousels include keyboard navigation (arrow keys, Home, End), ARIA roles, and dot indicators by default.