Carousel 走马灯

在有限空间内循环播放图片、卡片等内容，支持多种展示模式。

基础用法

默认水平轮播，自动播放，悬停显示切换箭头。

当前：第 1 张

<my-carousel style="height:280px" @change="onChange">
  <img src="/images/tp1.jpg" style="width:100%;height:100%;object-fit:cover" />
  <img src="/images/tp2.jpg" style="width:100%;height:100%;object-fit:cover" />
  <img src="/images/tp3.jpg" style="width:100%;height:100%;object-fit:cover" />
</my-carousel>

动态模糊

motionBlur 在切换过程中对非活跃幻灯片应用模糊效果。

<my-carousel motion-blur :arrow="'always'">
  <img src="/images/tp1.jpg" />
  <img src="/images/tp2.jpg" />
  <img src="/images/tp3.jpg" />
</my-carousel>

切换箭头

arrow 控制箭头显示：always 始终可见、hover 悬停可见、never 隐藏。

always — 始终显示

hover — 悬停显示（默认）

<my-carousel arrow="always">...</my-carousel>
<my-carousel arrow="hover">...</my-carousel>
<my-carousel arrow="never">...</my-carousel>

指示器

indicator 控制指示器位置：inside 内部、outside 外部、none 隐藏。

inside — 悬浮在轮播内部

outside — 显示在轮播下方

<my-carousel indicator="inside">...</my-carousel>
<my-carousel indicator="outside">...</my-carousel>

卡片模式

card 模式让幻灯片以卡片形式展示，两侧幻灯片部分露出，中间卡片突出。

<my-carousel card :arrow="'always'">
  <img src="/images/tp1.jpg" />
  <img src="/images/tp2.jpg" />
  <img src="/images/tp3.jpg" />
</my-carousel>

垂直排列

direction="vertical" 切换为垂直方向轮播，箭头自动调整为上下方向。

<my-carousel direction="vertical" :arrow="'always'">
  <img src="/images/tp1.jpg" />
  <img src="/images/tp2.jpg" />
  <img src="/images/tp3.jpg" />
</my-carousel>

封面流

coverflow 模式下中间图片清晰突出，两侧图片模糊后退，形成 3D 层叠效果。

<my-carousel coverflow :arrow="'always'">
  <img src="/images/tp1.jpg" />
  <img src="/images/tp2.jpg" />
  <img src="/images/tp3.jpg" />
</my-carousel>

组件结构

根元素 .my-carousel 包含轨道 .my-carousel__track（承载所有 slide）、左右切换箭头和底部指示器。支持卡片模式、封面流模式和垂直方向。

CSS 类名

类名	说明
.my-carousel	根元素
.my-carousel.is-card	卡片模式
.my-carousel.is-coverflow	封面流模式
.my-carousel.is-blur	动态模糊模式
.my-carousel--horizontal	水平方向
.my-carousel--vertical	垂直方向
.my-carousel__track	幻灯片轨道
.my-carousel__track.is-animating	切换动画进行中
.my-carousel__slide	幻灯片
.my-carousel__slide.is-active	当前活跃幻灯片
.my-carousel__slide.is-prev	前一张幻灯片
.my-carousel__slide.is-next	后一张幻灯片
.my-carousel__slide.is-blur	模糊效果
.my-carousel__slide-content	幻灯片内容容器
.my-carousel__slide-title	幻灯片标题
.my-carousel__arrow	切换箭头按钮
.my-carousel__arrow.is-visible	箭头可见
.my-carousel__arrow--prev	前一张箭头
.my-carousel__arrow--next	后一张箭头
.my-carousel__indicators	指示器容器
.my-carousel__indicators--inside	指示器在内部
.my-carousel__indicators--outside	指示器在外部
.my-carousel__dot	指示器圆点
.my-carousel__dot.is-active	当前激活的指示器

API

Carousel Props

属性	说明	类型	默认值
interval	自动播放间隔 (ms)，0 停止	number	4000
arrow	箭头显示时机	'always' | 'hover' | 'never'	'hover'
indicator	指示器位置	'inside' | 'outside' | 'none'	'inside'
direction	轮播方向	'horizontal' | 'vertical'	'horizontal'
autoHeight	高度随当前 slide 自适应	boolean	false
card	卡片模式	boolean	false
coverflow	封面流模式	boolean	false
motionBlur	动态模糊效果	boolean	false

Carousel Events

事件	说明	回调
change	幻灯片切换	(index: number, prevIndex: number)

Carousel Slots

名称	说明	作用域
default	幻灯片内容（每个子元素为一个 slide）	—
slide-{i}	第 i 张幻灯片（具名插槽）	{ index, active }