Skip to content
C-192Component

WebGL Endless Media Carousel

Plain editable section (eyebrow, heading, intro) holding a small vanilla-JS 3D media deck — no Swiper. "Media Card" component instances (mediaType select image|video, image, video url, posterAlt, caption — duplicate/reor…

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.

WebGL Endless Media 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
Component
Category
Sliders and carousels
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 8

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

data-autoplay
truefalse

gentle continuous drift

data-speed
textdefault 0.16

drift slots/second

data-spacing
numberdefault 260

px between card centres

data-scale-min
numberdefault 0.6

scale of the farthest visible cards

data-parallax
numberdefault 40

0-100

data-drag
truefalse

pointer/touch drag

data-wheel
truefalse

horizontal wheel / trackpad input

data-card-height
numberdefault 280 / 360

px

Component props 1

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Media Card8 in this pattern · 5 props
PropTypeDefault
mediaType
text

image

image
text

https://images.unsplash.com/photo-1500534623283-312aade485b7?w=640

video
text

empty

posterAlt
text

Low tide, first light — frame 1

caption
text

Low tide, first light

Included in Pro From €39 a year, with all 753 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan