Diagonal Carousel

Diagonal Carousel is an image interaction in the UI HUB image interactions collection. A diagonal 3D carousel: slides march down an angled line with each neighbour offset vertically by verticalStep, rotated by rotationStep and scaled down, while the active square card sits sharp and bright. The track translates horizontally to centre the active slide.

The component is driven by 17 documented props (items, activeIndex, defaultActiveIndex, onActiveIndexChange, loop, slideSize and 11 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: Diagonal step math (x track + y = distance*verticalStep + rotation); Controlled/uncontrolled activeIndex; Keyboard ArrowLeft/ArrowRight handling.

Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.