Circular Carousel
Images on a free spinning 3D ring: drag with momentum, it snaps to the nearest card, click a card to bring it to the front.
import { CircularCarousel } from "pleate/effects/circular-carousel";Places
Dolomites
Props
- images
Cards on the ring.
{ src, alt, title? }[]- cardWidth / cardHeight
Card size in px.
numberdefault 180 / 240- radius
Ring radius; fits the cards by default.
number- tilt
Camera tilt in degrees.
numberdefault 8- onIndexChange
Called when the front card changes.
(index) => void- label
Accessible name.
stringdefault "Gallery"
Accessibility
- Cards are buttons with a roving tab stop; arrow keys, Home and End turn the ring.
- The front card title is announced politely.
- Reduced motion snaps without spinning.