Rotating Cards
3D circular carousel with draggable rotating cards
rotating-cards-tw
1
2
3
4
5
6
7
8
9
10
Customize
360
20
160
190
10
Props
| Name | Type | Default | Description |
|---|---|---|---|
| cards | Card[] | [] | Array of card objects with id, content, optional background, and optional image |
| radius | number | 360 | Radius of the circle in pixels |
| duration | number | 20 | Duration of one full rotation in seconds |
| cardWidth | number | 160 | Width of each card in pixels |
| cardHeight | number | 190 | Height of each card in pixels |
| pauseOnHover | boolean | true | Pause rotation when hovering over the component |
| reverse | boolean | false | Reverse the rotation direction |
| draggable | boolean | false | Enable drag to rotate the circle |
| autoPlay | boolean | true | Auto-play rotation animation |
| onCardClick | (card: Card, index: number) => void | undefined | Callback when a card is clicked |
| mouseWheel | boolean | false | Enable mouse wheel to control rotation |
| className | string | "" | Additional CSS classes for the container |
| cardClassName | string | "" | Additional CSS classes for individual cards |
| initialRotation | number | 0 | Initial rotation offset in degrees |