navigation

Carousel

Embla ベースのアクセシブルなカルーセル。スライド読み上げ、キーボード操作、トラック・スライド・前後ボタンの複合 API を備えています。

インポート

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@stella-ds/react'

CarouselCarouselContentCarouselItemCarouselPreviousCarouselNext

Props

Prop	型	デフォルト	説明
loop	boolean	false	Wrap from the last slide back to the first
slideAlign	'smart' \| 'start' \| 'center' \| 'end'	'center'	Embla snap alignment
slidesPerView	number	1	How many slides should fit in one viewport. Fractional values create peeking layouts.
setApi	(api: CarouselApi) => void	undefined	Expose the underlying Embla API for advanced control

Preview

Two-up cards

Launch faster

Accessible primitives, tokens, and docs that give product surfaces a cohesive starting point.

Shape the mood

Move between base, surface, and accent treatments without rebuilding the whole composition.

Ship in one system

Storybook stories, preview snippets, and package exports stay aligned as the component set grows.

Exact-fit images

Project Atlas

A documentation shell with rounded media framing and exact-fit edge alignment.

Project Nova

A compact gallery card that still keeps the outer border and shadow fully visible.

Two slides fit exactly with no edge clipping.

使用例

Two-up cards

<Carousel aria-label="Featured projects" slideAlign="smart" slidesPerView={2}>
  <CarouselContent>
    <CarouselItem>
      <article style={{ borderRadius: '1rem', border: '1px solid var(--stella-color-void-muted)', boxShadow: 'var(--stella-shadow-md)', padding: '1.25rem' }}>
        Project one
      </article>
    </CarouselItem>
    <CarouselItem>
      <article style={{ borderRadius: '1rem', border: '1px solid var(--stella-color-void-muted)', boxShadow: 'var(--stella-shadow-md)', padding: '1.25rem' }}>
        Project two
      </article>
    </CarouselItem>
    <CarouselItem>
      <article style={{ borderRadius: '1rem', border: '1px solid var(--stella-color-void-muted)', boxShadow: 'var(--stella-shadow-md)', padding: '1.25rem' }}>
        Project three
      </article>
    </CarouselItem>
  </CarouselContent>
  <div style={{ display: 'flex', gap: '0.75rem' }}>
    <CarouselPrevious />
    <CarouselNext />
  </div>
</Carousel>

← Card

コンポーネント一覧

Checkbox →