Carousel 走马灯

在有限空间内循环播放同一类型的图片、文字等内容

基础用法

将 el-carousel 与 el-carousel-item 结合使用即可实现走马灯。每个幻灯片的内容是完全可定制的，您只需要将其放入 el-carousel-item 标签内即可。默认情况下，在鼠标悬停于指示器时就会进行切换。将 trigger 属性设置为 click，则只有在点击指示器时才会切换。

指示器触发时切换（默认）

指示器点击时切换

动态模糊 2.6.0

添加动态模糊，为走马灯注入活力和流畅感。

启用动态模糊可以增强走马灯的活力和流畅度。默认情况下，motion-blur 参数设置为 false，激活此功能可提供更具吸引力的视觉体验。

切换时的动态模糊（默认）

垂直效果

指示器

指示器可以显示在容器外部

indicator-position 属性决定了指示器的位置。默认情况下，它们位于走马灯内部，将 indicator-position 设置为 outside 会将其移动到外部；设置为 none 则会隐藏指示器。

切换箭头

可以定义切换箭头的显示时机

arrow 属性决定了切换箭头何时显示。默认情况下，当鼠标悬停在走马灯上时显示。将 arrow 设置为 always 或 never 可以始终显示或隐藏箭头。

自动高度

当 carousel 的 height 设置为 auto 时，走马灯的高度将根据 carousel item 的高度自动设置。

每个轮播项具有不同的高度

卡片模式

当页面足够宽但高度有限时，可以激活卡片模式

将 type 设置为 card 即可激活卡片模式。除了外观之外，卡片模式与普通模式最大的区别在于，直接点击两侧的幻灯片即可切换。

垂直方向

默认情况下，direction 为 horizontal。通过将 direction 设置为 vertical，使走马灯在垂直方向上显示。

普通垂直布局

卡片垂直布局

Carousel 属性

名称	描述	类型	默认值
高度	走马灯的高度	`string`	''
initial-index	初始激活的幻灯片索引（从 0 开始）	`number`	0
trigger	指示器的触发方式	`枚举`	悬浮时
autoplay	是否自动循环播放	`boolean`	true
interval	自动循环的间隔，单位为毫秒	`number`	3000
indicator-position	指示器的位置	`枚举`	''
arrow	切换箭头的显示时机	`枚举`	悬浮时
type	走马灯的类型	`枚举`	''
card-scale 2.7.8	当类型为 card 时，次要卡片的缩放比例	`number`	0.83
loop	是否循环显示	`boolean`	true
direction	显示方向	`枚举`	horizontal
pause-on-hover	鼠标悬停时是否暂停自动播放	`boolean`	true
motion-blur 2.6.0	为走马灯注入活力和流畅感	`boolean`	false

Carousel 事件

名称	描述	类型
change	激活幻灯片切换时触发。它有两个参数：一个是新激活幻灯片的索引，另一个是原激活幻灯片的索引。	`Function`

Carousel 插槽

名称	描述	子标签
default	自定义默认内容	轮播项

Carousel 对外暴露的方法

方法	描述	类型
activeIndex 2.7.8	当前激活的幻灯片索引	`number`
setActiveItem	手动切换幻灯片，参数为要切换到的幻灯片的索引（从 0 开始）；或者对应 `el-carousel-item` 的 `name`	`Function`
prev	切换到上一张幻灯片	`Function`
next	切换到下一张幻灯片	`Function`