Skewed Carousel

Props

20

Name	Type	Default	Description
`items`	SkewedCarouselItem[]	`10 sample slides`	Slides rendered by the carousel
`initialIndex`	number	`3`	Slide focused on mount
`cardWidth`	number	`200`	Slide width in pixels
`aspectRatio`	string	`"3 / 4"`	Aspect ratio of each slide
`rotation`	number	`60`	Degrees each slide turns per step away from the active one
`inactiveScale`	number	`0.85`	Scale applied to every inactive slide
`perspective`	number	`800`	Perspective depth applied to each slide in pixels
`borderRadius`	number	`8`	Corner radius of the slides in pixels
`titleBlur`	number	`2`	Blur applied to inactive captions in pixels
`speed`	number	`1`	Multiplier for the transition duration
`showTitles`	boolean	`true`	Show the caption under the active slide
`showControls`	boolean	`true`	Show the previous and next buttons
`showDots`	boolean	`true`	Show the progress dots
`loop`	boolean	`false`	Wrap around at either end
`autoplay`	boolean	`false`	Advance on a timer
`autoplayDelay`	number	`3000`	Delay between automatic advances in milliseconds
`enableDrag`	boolean	`true`	Allow dragging across the strip 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 active slide changes

itemsSkewedCarouselItem[]

Slides rendered by the carousel

Default10 sample slides

initialIndexnumber

Slide focused on mount

Default3

cardWidthnumber

Slide width in pixels

Default200

aspectRatiostring

Aspect ratio of each slide

Default"3 / 4"

rotationnumber

Degrees each slide turns per step away from the active one

Default60

inactiveScalenumber

Scale applied to every inactive slide

Default0.85

perspectivenumber

Perspective depth applied to each slide in pixels

Default800

borderRadiusnumber

Corner radius of the slides in pixels

Default8

titleBlurnumber

Blur applied to inactive captions in pixels

Default2

speednumber

Multiplier for the transition duration

Default1

showTitlesboolean

Show the caption under the active slide

Defaulttrue

showControlsboolean

Show the previous and next buttons

Defaulttrue

showDotsboolean

Show the progress dots

Defaulttrue

loopboolean

Wrap around at either end

Defaultfalse

autoplayboolean

Advance on a timer

Defaultfalse

autoplayDelaynumber

Delay between automatic advances in milliseconds

Default3000

enableDragboolean

Allow dragging across the strip to navigate

Defaulttrue

enableKeyboardboolean

Allow arrow keys to navigate when focused

Defaulttrue

classNamestring

Additional CSS classes

Defaultundefined

onIndexChange(index: number) => void

Fired whenever the active slide changes