Swipe Carousel
One card at a time that you swipe or drag sideways, with dots and an optional autoplay timer that fills the active dot. For a 3D ring, see 3D Effects.
import { SwipeCarousel } from "pleate/effects/swipe-carousel";Feature tour
Plan your week
Drag tasks onto days and see the load at a glance.
Props
- children
One child per slide.
ReactNode- index / defaultIndex / onIndexChange
Controlled or uncontrolled slide.
numberdefault 0- autoplay
Time per slide in ms; 0 is off.
numberdefault 0- loop
Wrap around at the ends.
booleandefault true- label
Accessible name.
stringdefault "Carousel"
Accessibility
- A carousel region: arrow keys, Home and End move between slides when it has focus.
- Hidden slides are inert; each slide is labelled n of m.
- Autoplay pauses on hover and focus and is off with reduced motion.