L-192Layout

Elastic Frame Carousel

A hero image row of five "Story Frame" component instances (photo, alt, eyebrow, title, description, link URL + label — empty URL hides the button, tone select for the index-chip accent): only one frame is active at a ti…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Elastic Frame Carousel reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type: Layout
Category: Sliders and carousels
Responsive: Desktop to phone
Works with: Etch, ACSS, plain CSS

Options 16

Set on the section, in Etch’s attributes panel. No code needed.

data-theme

lightdark

section theme

data-trigger

clickhoverautoplay

what makes a frame become active: click selects and stays, hover expands on pointer/focus and returns to the previous active frame on leave, autoplay always cycles on a…

data-autoplay

truefalse

and

data-delay

number

ms · autoplay always runs a background timer in addition to whatever data-trigger is set, unless false

data-loop

truefalse

autoplay/next wraps past the last frame instead of stopping

data-easing

springsmoothsnappylinear

width-morph curve: spring overshoots and settles (default, matches the source), smooth/snappy are non-overshoot eases, linear is constant-speed

data-duration

number

ms · width-morph duration

data-radius

nonesmlxl

frame corner radius

data-gap

number

px · gap between frames

data-ratio

portraitsquarewide

stage block-size ratio against the container width

data-overlay

nonesoftdeep

scrim strength behind the active frame caption

data-arrows

truefalse

and

data-arrows-position

sidesbottom-startbottom-endoverlay-bottom-end

data-pagination

dotsfractionnone

and

data-pagination-position

bottom-startbottom-centerbottom-endoverlay-bottom-end

data-reduced

fadenone

prefers-reduced-motion behaviour: fade cross-fades the caption without moving the frame widths, none disables the width morph entirely (frames stay evenly sized, only th…