Carousel

短い順序付きのコンテンツを、スライド単位で閲覧する場合に使います。

プレビュー

機能の紹介

ダッシュボード、設定、分析のスライドをドラッグや前後の操作で閲覧します。

ダッシュボード

設定

分析

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/carousel

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

領域に名前を付け、CarouselContent と CarouselItem にスライドを置きます。名前付きの前後ボタンを加え、自動移動なしでも主要内容を見つけられるようにします。

"use client";

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";

export default function Example() {
  return (
    <Carousel aria-label="Product tour" className="max-w-md px-12">
      <CarouselContent>
        {["Overview", "Projects", "Settings"].map(title => (
          <CarouselItem key={title}><div className="p-6">{title}</div></CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

API リファレンス

スクロール位置とドラッグは Embla Carousel に任せ、ニューモーフィズムはスライド表面と操作ボタンに限定します。先頭と末尾では前後ボタンが自動的に無効になります。

コンポーネント	プロパティ	型	デフォルト	説明
`Carousel`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	スクロール軸と対応する方向キー操作を指定します。
`Carousel`	`opts`	`EmblaOptionsType`	`—`	loop や align などの Embla オプションを渡します。
`Carousel`	`setApi`	`(api: CarouselApi) => void`	`—`	外部連携用に Embla API インスタンスを受け取ります。
`CarouselItem`	`children`	`ReactNode`	`—`	1つのスライドの実コンテンツを配置します。
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	前後ボタンのアクセシブル名をローカライズします。

プレビュー

機能の紹介

インストール

使い方

API リファレンス

アクセシビリティ