Carousel

逐张切换的幻灯片：可拖动、滑动，也可用方向键或两侧的浮起色斜切块按钮切换。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/carousel

示例

可滑动浏览的四个委托

Sealed crate

Rail yards → North gate

3,100 cr

Cold box

Harbor → Old market

1,450 cr

Long case

Tower 9 → Canal docks

2,275 cr

Parcel run

Old market → Harbor

640 cr

carousel-crates.tsx

import {  Carousel,  CarouselContent,  CarouselDots,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@/components/zero/carousel";const crates = [  ["Sealed crate", "Rail yards → North gate", "3,100 cr"],  ["Cold box", "Harbor → Old market", "1,450 cr"],  ["Long case", "Tower 9 → Canal docks", "2,275 cr"],  ["Parcel run", "Old market → Harbor", "640 cr"],] as const;export default function CarouselCrates() {  return (    <div className="w-full max-w-xs px-14">      <Carousel>        <CarouselContent>          {crates.map(([name, route, reward]) => (            <CarouselItem key={name}>              <div className="panel grid aspect-[4/3] content-end gap-1 p-5">                <div className="font-black font-zero text-zero-xl italic">                  {name}                </div>                <div className="font-medium font-zero-text text-zero-sm text-zero-text-2">                  {route}                </div>                <div className="font-semibold font-zero-text text-zero-accent tabular-nums">                  {reward}                </div>              </div>            </CarouselItem>          ))}        </CarouselContent>        <CarouselPrevious />        <CarouselNext />        <CarouselDots className="mt-4" />      </Carousel>    </div>  );}

行为

CarouselDots 是一排倾斜指示条，每张幻灯片对应一条，当前一条更长并显示为强调色；点击指示条即跳转到对应的幻灯片。底层基于 Embla：opts 与 plugins 即 Embla 的选项与插件，setApi 用于获取 Embla 的 API。

属性

Carousel

属性	类型	默认值	说明
orientation	"horizontal" \| "vertical"	"horizontal"	幻灯片的排列方向。
opts	EmblaOptions	—	Embla 的选项，例如 loop、align。
setApi	(api) => void	—	接收 Embla 的 API。

CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots

CarouselDots

属性	类型	默认值	说明
label	(slide: number, count: number) => string	"Slide {slide} of {count}"	每个指示条的可访问名称，由幻灯片序号（从 1 起）与总数生成。