Box Carousel
0
Used by 0Controls
Box Carousel
Rotate images and videos across the four faces of a 3D cube, driven by autoplay, drag, or arrow keys.
KEY FEATURES
- — Four-faced 3D cube built with CSS preserve-3d rotation
- — Image and video items with optional video poster
- — Horizontal or vertical spin via four directions (left, right, top, bottom)
- — Autoplay or drag-and-swipe interaction modes
- — Arrow-key navigation while hovered or focused
- — Adjustable drag sensitivity from 1 to 10
- — Customizable rotation easing and timing through a transition control
- — Fixed per-face image width and height in pixels
- — Direct URL override that wins over the Framer image picker
- — Respects reduced-motion with instant rotation transitions
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
items
Array<{ type: enum, src: responsiveimage, srcUrl: string, alt: string, poster: responsiveimage }>
[...]
List of image or video items shown on the cube faces; padded to at least four.
imageWidth
number
500
Width of each cube face in pixels.
imageHeight
number
300
Height of each cube face in pixels.
direction
enum
right
Rotation direction: left or right spin horizontally, top or bottom vertically.
ease
transition
{"..."}
Rotation transition where duration sets move speed and delay paces each turn.
dragSensitivity
number
5
How far the cube spins per pixel dragged; higher spins faster in drag mode.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
animation
enum
autoplay
Interaction mode: autoplay rotates on its own, drag lets the user swipe.
