Rotating Cards

3D circular carousel with draggable rotating cards

rotating-cards-tw

1

2

3

4

5

6

7

8

9

10

Customize

Layout

360
160
190
10

Animation

20

Interaction

Props

cardsCard[]

Array of card objects with id, content, optional background, and optional image

Default:[]
radiusnumber

Radius of the circle in pixels

Default:360
durationnumber

Duration of one full rotation in seconds

Default:20
cardWidthnumber

Width of each card in pixels

Default:160
cardHeightnumber

Height of each card in pixels

Default:190
pauseOnHoverboolean

Pause rotation when hovering over the component

Default:true
reverseboolean

Reverse the rotation direction

Default:false
draggableboolean

Enable drag to rotate the circle

Default:false
autoPlayboolean

Auto-play rotation animation

Default:true
onCardClick(card: Card, index: number) => void

Callback when a card is clicked

Default:undefined
mouseWheelboolean

Enable mouse wheel to control rotation

Default:false
classNamestring

Additional CSS classes for the container

Default:""
cardClassNamestring

Additional CSS classes for individual cards

Default:""
initialRotationnumber

Initial rotation offset in degrees

Default:0