Coverflow Carousel
0
Used by 0Controls
Coverflow Carousel
Glide through an infinite cover-flow reel where the centered image grows into a landscape hero while its neighbors fold into thin slats.
KEY FEATURES
- — Active card expands to a full landscape hero while others shrink to slats
- — Seamless infinite looping with size locked to horizontal travel
- — Autoplay with left-to-right or right-to-left direction
- — Prev/next arrow buttons with custom color, background, size, and position
- — Click any card to jump to it along the shortest wrapped path
- — Keyboard arrow navigation when hovered or focused
- — Adjustable active and slat dimensions, gap, and corner rounding
- — Configurable transition speed and per-card dwell time
- — Per-image URL or responsive source with alt text
- — Respects reduced-motion preferences
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
images
Array<{ src: responsiveimage, srcUrl: string, alt: string }>
[...]
Images shown as coverflow cards, each with an upload, URL, and alt text.
activeWidth
number
600
Width in px of the centered active card at full size.
activeHeight
number
400
Height in px of the centered active card at full size.
restWidth
number
200
Width in px of the thin side slats when not active.
restHeight
number
270
Height in px of the thin side slats when not active.
gap
number
30
Horizontal spacing in px between adjacent cards.
radius
number
2
Corner rounding of the cards, from square to fully rounded.
showArrows
boolean
true
Shows the previous and next navigation arrow buttons.
arrowColor
color
#000000
Color of the chevron icon inside the arrow buttons.
arrowBackground
color
#FFFFFF
Background fill color of the circular arrow buttons.
arrowSize
number
56
Diameter in px of the circular arrow buttons.
arrowPosition
number
95
How far out the arrows sit: 100% flush to the edges, 0% at the center.
autoplay
boolean
false
Automatically advances the carousel one card at a time.
autoplayDirection
enum
rightToLeft
Autoplay travel direction: left to right or right to left.
transition
transition
{"..."}
Move timing; duration sets slide speed and delay sets each card's dwell.
