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

All photos and visual assets used in this preview are sourced from Unsplash.

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: Bricks, ACSS, plain CSS

Options 16

Set on the section, in Bricks’ 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…