Components
Carousel
Slides in a row that snap as you swipe or scroll, with glass buttons and dots that light the current one beneath, and the arrow keys. Native scrolling, so it follows the finger exactly.
Import
import { Carousel, CarouselContent, CarouselItem, CarouselControls, CarouselPrevious, CarouselNext, CarouselDots } from '@rinzai/zen';Examples
Several
Several slides in view: size the items (here a half, then a third on wider screens). It snaps to each; the buttons sit together at the end, each gone when there's no further to go.
API reference
<Carousel>
Slides in a row that scrolls sideways and snaps to each one: swipe, scroll, use the arrow keys once it has focus, or the CarouselPrevious and CarouselNext buttons. Put a CarouselContent of CarouselItems inside, then a CarouselControls of the buttons and CarouselDots if you want them. A slide is as wide as the carousel unless you size it (e.g. basis-1/3 for three in view).
No props of its own; it accepts the props of the element it renders.
<CarouselContent>
The scrolling row of slides.
No props of its own; it accepts the props of the element it renders.
<CarouselItem>
One slide: it's announced as which of how many.
No props of its own; it accepts the props of the element it renders.
<CarouselControls>
The row under the slides: CarouselPrevious at the start, CarouselNext at the end, CarouselDots between.
No props of its own; it accepts the props of the element it renders.
<CarouselPrevious>
Scroll back one slide: a round glass button, gone at the first (keeping its place, so the controls don't shift). Put it in CarouselControls, under the slides, where it never covers them.
No props of its own; it accepts the props of the element it renders.
<CarouselNext>
Scroll on one slide: a round glass button, gone at the last.
No props of its own; it accepts the props of the element it renders.
<CarouselDots>
A dot for each place it can scroll to, the current one drawn out long and lit; each goes there.
No props of its own; it accepts the props of the element it renders.