A skewed carousel of cards that tilt as they slide
| 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
10 sample slidesinitialIndexnumberSlide focused on mount
3cardWidthnumberSlide width in pixels
200aspectRatiostringAspect ratio of each slide
"3 / 4"rotationnumberDegrees each slide turns per step away from the active one
60inactiveScalenumberScale applied to every inactive slide
0.85perspectivenumberPerspective depth applied to each slide in pixels
800borderRadiusnumberCorner radius of the slides in pixels
8titleBlurnumberBlur applied to inactive captions in pixels
2speednumberMultiplier for the transition duration
1showTitlesbooleanShow the caption under the active slide
trueshowControlsbooleanShow the previous and next buttons
trueshowDotsbooleanShow the progress dots
trueloopbooleanWrap around at either end
falseautoplaybooleanAdvance on a timer
falseautoplayDelaynumberDelay between automatic advances in milliseconds
3000enableDragbooleanAllow dragging across the strip to navigate
trueenableKeyboardbooleanAllow arrow keys to navigate when focused
trueclassNamestringAdditional CSS classes
undefinedonIndexChange(index: number) => voidFired whenever the active slide changes
undefined