Depth Carousel
Cards on a rail that runs back into depth. Drag, use the arrows or let it advance on a timer.
import { DepthCarousel } from "pleate/effects/depth-carousel";Stories
1 / 5
Props
- children
One child per card.
ReactNode- index / defaultIndex / onIndexChange
Controlled or uncontrolled card.
numberdefault 0- cardWidth / cardHeight
Card size in px.
numberdefault 280 / 360- visible
Cards shown behind the front one.
numberdefault 3- autoplay
Time per card in ms; 0 is off.
numberdefault 0- label
Accessible name.
stringdefault "Carousel"
Accessibility
- Previous and next buttons plus arrow keys, Home and End.
- Only the front card is exposed; the position is announced.
- Autoplay pauses on hover and focus and is off with reduced motion.