Carousel

轮播（Carousel）基于 Embla Carousel 封装，用于在有限空间内展示一组可滑动的图片、卡片或内容面板。

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselRoot } from '@skyroc/web-ui';

架构说明

Carousel 由根容器、内容轨道、轮播项和前后切换按钮组成。主组件会自动组合这些子组件，也可以按需使用子组件自定义结构。

• CarouselRoot：根容器，创建 Embla 实例并通过上下文提供滚动状态与控制方法。
• CarouselContent：视口与内容轨道容器，连接 Embla 的 viewport ref。
• CarouselItem：单个 slide，默认占满一屏宽度，可通过 class 调整为多项展示。
• CarouselNext：下一项按钮，会在无法继续滚动时自动禁用。
• CarouselPrevious：上一项按钮，会在无法继续滚动时自动禁用。

何时使用

• 需要在一个区域内浏览多张图片、多张卡片或多个推荐项时。
• 需要支持横向、纵向或多项同时露出的内容浏览时。
• 需要通过 Embla opts 或插件扩展滚动行为时。
• 如果内容数量较少且需要同时比较，优先使用普通网格或列表。

基础用法

通过 counts 搭配函数 children 按索引生成轮播项。opts 会透传给 Embla Carousel。

多项展示

通过 classNames.item 调整每个 slide 的 basis，可以让一屏中同时露出多个项目。

垂直方向

设置 orientation="vertical" 后，Carousel 使用纵向滚动轴，键盘方向键也会切换为上下键。

插件

通过 plugins 接入 Embla 插件，例如自动播放、淡入淡出或自定义滚动效果。插件实例会作为数组传给底层 useEmblaCarousel。

<Carousel counts={5} opts={{ loop: true }} plugins={[Autoplay({ delay: 2000 })]}>
  {index => <div>{index + 1}</div>}
</Carousel>

API

Carousel

通用属性参考：根容器支持原生 div 元素属性，轮播行为由 Embla opts 控制。

子组件

类型