开发预览 更新于 2026-05-10

Carousel 轮播

横向轮播图片或自定义内容,支持自动播放、循环、指示点、左右控制。

基础用法

items 接收 { src, alt } 列表渲染图片;autoplay 配合 interval 自动滚动,鼠标悬停时暂停。

<CfCarousel :items="items" autoplay :interval="3000" />
<CfCarousel items={items} autoplay interval={3000} />

API

属性类型默认值说明
itemsCarouselItem[]轮播项列表
value / modelValuenumber受控当前索引
defaultValuenumber0非受控初始索引
autoplaybooleanfalse自动播放
intervalnumber4000自动播放间隔(毫秒)
loopbooleantrue循环播放
controlsbooleantrue显示左右切换按钮
indicatorsbooleantrue显示底部指示点
size'sm' | 'md' | 'lg''md'视口高度档位

事件:onChange(index) —— 当前索引变化时触发。

反馈与讨论

Carousel 轮播 的讨论

0
0 / 600
一键发送
正在加载评论...