展示组件

Carousel 轮播

基于 Embla Carousel 的轮播组件，支持水平/垂直方向、键盘导航、触摸滑动，可通过 useCarousel hook 获取 API 进行程序化控制。

安装

bash

pnpm dlx shadcn@latest add carousel -c packages/react

基础

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

tsx

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@polyui/react/carousel"
export function CarouselBasic() {
  const items = ["Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"]

  return (
    <Carousel className="w-72">
      <CarouselContent>
        {items.map((item, index) => (
          <CarouselItem key={index}>
            <div className="flex aspect-square items-center justify-center rounded-xl border border-border bg-muted text-lg font-semibold">
              {item}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

多选

通过 basis 类名控制每个 CarouselItem 的宽度，实现一次显示多个项目。

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

tsx

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@polyui/react/carousel"
export function CarouselMultiple() {
  const items = ["Slide 1", "Slide 2", "Slide 3", "Slide 4", "Slide 5"]

  return (
    <Carousel className="w-full max-w-sm">
      <CarouselContent className="-ml-4">
        {items.map((item, index) => (
          <CarouselItem key={index} className="pl-4 basis-1/3">
            <div className="flex aspect-square items-center justify-center rounded-xl border border-border bg-muted text-lg font-semibold">
              {item}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Props

Carousel

属性	类型	默认值	说明
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	轮播方向。
`opts`	`EmblaOptionsType`	`—`	传递给 Embla Carousel 的配置选项。
`plugins`	`EmblaPluginType[]`	`—`	Embla Carousel 插件列表（如自动播放）。
`setApi`	`(api: CarouselApi) => void`	`—`	获取 Embla API 实例的回调。