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`	`—`	放置单个幻灯片的真实内容。
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	本地化前后导航按钮的无障碍名称。

预览

功能导览

安装

用法

API 参考

无障碍