Rotating Cards

3D circular carousel with draggable rotating cards

1

2

3

4

5

6

7

8

9

10

Customize

Radius
360
Card Width
160
Card Height
190
Number of Cards
10
Duration
20

Props

14
cardsCard[]

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

Default[]
radiusnumber

Radius of the circle in pixels

Default360
durationnumber

Duration of one full rotation in seconds

Default20
cardWidthnumber

Width of each card in pixels

Default160
cardHeightnumber

Height of each card in pixels

Default190
pauseOnHoverboolean

Pause rotation when hovering over the component

Defaulttrue
reverseboolean

Reverse the rotation direction

Defaultfalse
draggableboolean

Enable drag to rotate the circle

Defaultfalse
autoPlayboolean

Auto-play rotation animation

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

Callback when a card is clicked

Defaultundefined
mouseWheelboolean

Enable mouse wheel to control rotation

Defaultfalse
classNamestring

Additional CSS classes for the container

Default""
cardClassNamestring

Additional CSS classes for individual cards

Default""
initialRotationnumber

Initial rotation offset in degrees

Default0