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.
What is Diagonal Carousel?
A diagonal stepped image carousel with vertical offset, rotation, loop and keyboard navigation.
Diagonal Carousel at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React, Framer Motion and Lucide React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 17
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Diagonal Carousel works
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. Navigation via card click, prev/next buttons, dots and ArrowLeft/ArrowRight; loop wraps. Supports controlled or uncontrolled activeIndex and returns null when there are no items.
Technical information for Diagonal Carousel
| Category | Image Interactions |
|---|---|
| Libraries | React, Framer Motion and Lucide React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | spring physics |
| State change | slides stepped down the diagonal to active card centred at the apex with its label scaled in |
| Props | 17 configurable |
| Usage example | Included on this page |
What Diagonal Carousel requires
- Diagonal step math (x track + y = distance*verticalStep + rotation)
- Controlled/uncontrolled activeIndex
- Keyboard ArrowLeft/ArrowRight handling
- ARIA carousel region + aria-current slides
- Inherits HTMLAttributes
How to use Diagonal Carousel
- Install the dependencies: npm install framer-motion and npm install lucide-react.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <DiagonalCarousel /> in your page using that import path.
- Pass any of the 17 documented props to change colours, density, speed or behaviour.
Diagonal Carousel questions
What is Diagonal Carousel?
A diagonal stepped image carousel with vertical offset, rotation, loop and keyboard navigation.
How does Diagonal Carousel work?
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. Navigation via card click, prev/next buttons, dots and ArrowLeft/ArrowRight; loop wraps. Supports controlled or uncontrolled activeIndex and returns null when there are no items.
Which category does Diagonal Carousel belong to?
Diagonal Carousel is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the items prop do in Diagonal Carousel?
Slides as { src, title, alt? }. It defaults to DEFAULT_ITEMS.
What does the activeIndex prop do in Diagonal Carousel?
Controlled active slide index (uncontrolled when omitted). It defaults to undefined.
Is Diagonal Carousel free to use?
Diagonal Carousel is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Diagonal Carousel use?
Diagonal Carousel uses React, Framer Motion and Lucide React and is styled with Tailwind CSS.
What does Diagonal Carousel need to run?
Diagonal Carousel needs Diagonal step math (x track + y = distance*verticalStep + rotation), Controlled/uncontrolled activeIndex, Keyboard ArrowLeft/ArrowRight handling and ARIA carousel region + aria-current slides.