Skip to main content
PolyUI/docs
中文

Display

Carousel

A carousel component built on Embla Carousel, supporting horizontal/vertical orientation, keyboard navigation, touch swipe, and programmatic control via the useCarousel hook.

Installation

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

Basic

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>
  )
}

Multiple

Control each CarouselItem's width with basis classes to show multiple items at once.

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"Carousel orientation.
optsEmblaOptionsType—Options passed to Embla Carousel.
pluginsEmblaPluginType[]—Embla Carousel plugins (e.g. autoplay).
setApi(api: CarouselApi) => void—Callback to receive the Embla API instance.