カルーセル
カードを1枚ずつ切り替えるギャラリーです。標準のスクロールとCSS scroll-snapを使うため、タッチでのスワイプ、トラックパッドのジェスチャー、キーボードでのスクロールがそのまま動きます。JavaScriptを使うのは、矢印と位置の表示だけです。
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add carousel共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
カードの幅
各項目はデフォルトでトラックを埋めます、従って正確に1枚のカードはスライドごとの眺めです。幅はに住んでいます CarouselItem トラックではなく、そのオーバーライドは、次のカードや混合幅の実行のピークを与えます。ポジションは、固定されたカード幅から計算されるのではなく、DOMから戻ってくるので、それらの幅が変化するときに言う必要はありません。
{/* One card per slide is the default: items fill the track */}<CarouselItem>…</CarouselItem>
{/* Override to show a peek of the next card, or to mix widths */}<CarouselItem className="w-[85%]">…</CarouselItem><CarouselItem className="w-[220px]">…</CarouselItem>アライメントとコントロール
align="center" 左端の代わりにトラックの途中で各カードを休ませ、ビューに1つのヒーローカードでギャラリーに収まる。 showArrows そして、 showDots クロムをベールのスワイプ可能なトラックに戻って除去し、 gap ピクセルの間隔を設定します。
{/* Snap each card to the middle of the track */}<Carousel aria-label="Gallery" align="center" gap={24}>…</Carousel>
{/* Bare track: no arrows, no dots, swipe only */}<Carousel aria-label="Logos" showArrows={false} showDots={false}>…</Carousel>アクセシビリティ
地域はカルーセルとして発表し、その名を奪います。 aria-label、それは必要です。 各カードは、その位置でラベルが付けられているので、スクリーンリーダーは何も番号を付けることなく「3 of 7」を読みます。 トラックは焦点を当てられるので、矢印キーはそれをスクロールし、前方/次ボタンは何も行わないのではなく、端で無効にします。 点を滑らせる prefers-reduced-motion, アニメーションではなくジャンプ.