Tumble Carousel

Cards that tumble end over end as the carousel advances

tumble-carousel-tw

04/10

Customize

Card Width

200

Rotation

Vertical Offset

Inactive Scale

0.60

Visible Range

2.4

Border Radius

Title Blur

2.0

Speed

1.0

Autoplay Delay

3000

Show TitlesShow ControlsShow CounterLoopAutoplayEnable Drag

Props

Name	Type	Default	Description
`items`	TumbleCarouselItem[]	`10 sample cards`	Cards rendered by the carousel
`initialIndex`	number	`3`	Card focused on mount
`cardWidth`	number	`200`	Card width in pixels
`aspectRatio`	string	`"1 / 1"`	Aspect ratio of each card
`frameHeight`	number	`undefined`	Height of the visible frame, derived from the card geometry when omitted
`rotation`	number	`30`	Degrees each card tumbles per step away from the focused one
`verticalOffset`	number	`50`	Vertical drop per step as a percentage of card height
`inactiveScale`	number	`0.6`	Scale applied to every unfocused card
`visibleRange`	number	`2.4`	Distance in steps at which cards have faded out completely
`borderRadius`	number	`16`	Corner radius of the cards in pixels
`titleBlur`	number	`2`	Blur applied to unfocused captions in pixels
`speed`	number	`1`	Multiplier for the transition duration
`showTitles`	boolean	`true`	Render the caption over the focused card
`showControls`	boolean	`true`	Show the previous and next buttons
`showCounter`	boolean	`true`	Show the position counter between the buttons
`loop`	boolean	`false`	Tumble endlessly in both directions
`autoplay`	boolean	`false`	Advance on a timer
`autoplayDelay`	number	`3000`	Delay between automatic advances in milliseconds
`enableDrag`	boolean	`true`	Allow dragging across the frame to navigate
`enableKeyboard`	boolean	`true`	Allow arrow keys to navigate when focused
`className`	string	`undefined`	Additional CSS classes
`onIndexChange`	(index: number) => void	`undefined`	Fired whenever the focused card changes

itemsTumbleCarouselItem[]

Cards rendered by the carousel

Default10 sample cards

initialIndexnumber

Card focused on mount

Default3

cardWidthnumber

Card width in pixels

Default200

aspectRatiostring

Aspect ratio of each card

Default"1 / 1"

frameHeightnumber

Height of the visible frame, derived from the card geometry when omitted

Defaultundefined

rotationnumber

Degrees each card tumbles per step away from the focused one

Default30

verticalOffsetnumber

Vertical drop per step as a percentage of card height

Default50

inactiveScalenumber

Scale applied to every unfocused card

Default0.6

visibleRangenumber

Distance in steps at which cards have faded out completely

Default2.4

borderRadiusnumber

Corner radius of the cards in pixels

Default16

titleBlurnumber

Blur applied to unfocused captions in pixels

Default2

speednumber

Multiplier for the transition duration

Default1

showTitlesboolean

Render the caption over the focused card

Defaulttrue

showControlsboolean

Show the previous and next buttons

Defaulttrue

showCounterboolean

Show the position counter between the buttons

Defaulttrue

loopboolean

Tumble endlessly in both directions

Defaultfalse

autoplayboolean

Advance on a timer

Defaultfalse

autoplayDelaynumber

Delay between automatic advances in milliseconds

Default3000

enableDragboolean

Allow dragging across the frame to navigate

Defaulttrue

enableKeyboardboolean

Allow arrow keys to navigate when focused

Defaulttrue

classNamestring

Additional CSS classes

Defaultundefined

onIndexChange(index: number) => void

Fired whenever the focused card changes

Defaultundefined