Single-frame carousel strategy.
Only the active item is visible at a time. Each slide stretches to the carousel viewport so projected media can fill the available space.
For edge-to-edge imagery, pair this strategy with object-fit: cover on the projected image element.
object-fit: cover
readonly strategy = new SingleCarouselStrategy(); Copy
readonly strategy = new SingleCarouselStrategy();
Readonly
Human-readable name (useful for debugging / stories).
Compute the CSS styles for a single item.
— the item's position in the array
— the currently centred / active index
Returns the CSS style object for the track container itself. Strategies may set perspective, overflow, etc.
perspective
overflow
Single-frame carousel strategy.
Only the active item is visible at a time. Each slide stretches to the carousel viewport so projected media can fill the available space.
For edge-to-edge imagery, pair this strategy with
object-fit: coveron the projected image element.Example