Carousel

Slides that snap one at a time as they scroll, with previous and next buttons.

Import

ts
import { Carousel } from '@k8ordo/ui';

Usage

The track is itself a scroll container, so besides the buttons it moves with a trackpad, a swipe, or the arrow keys once the track has focus. When one slide shows at a time, the position is shown as "2 / 4".

Spring

Summer

Autumn

Winter

tsx
<Carousel.Root label="Seasons">
  {seasons.map((season) => (
    <Carousel.Slide key={season} label={season}>
      <SeasonCard season={season} />
    </Carousel.Slide>
  ))}
</Carousel.Root>

Slide Size

slideSize is how much of the track one slide takes: full (one), lg (the next one peeks in), md (two), sm (three). With several in view there is no single current slide, so no position is shown.

Spring

Summer

Autumn

Winter

tsx
<Carousel.Root label="Seasons" slideSize="md">
  …
</Carousel.Root>

Props

Carousel.Root

label
Type: string
Default: -
children?
Type: ReactNode
Default: -
slideSize?
Type: 'full'|'lg'|'md'|'sm'
Default: 'full'

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n

Carousel.Slide

children?
Type: ReactNode
Default: -
label?
Type: string
Default: -

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n

Components