Carousel

スクロールスナップで 1 枚ずつ止まるスライドと、前後のボタン

インポート

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

使い方

トラックはスクロール領域そのもの。ボタンのほかに、トラックパッドやスワイプ、トラックにフォーカスを置いた矢印キーでも送れる。1 枚ずつ見せるときは「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>

スライドの幅

slideSize は 1 枚がトラックに占める幅。full（1 枚）、lg（次の 1 枚がのぞく）、md（2 枚）、sm（3 枚）。複数枚並べるときは「今の 1 枚」が決まらないので、位置は出さない。

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'

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Carousel.Slide

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

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components