Carousel 走马灯

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

基础用法

动态模糊 2.6.0

添加动态模糊以给走马灯注入活力和流畅性。

指示器

可以将指示器的显示位置设置在容器外部

切换箭头

可以设置切换箭头的显示时机

自动高度

carousel <code>的<code> height 设置为 auto时, carousel 的高度将根据子内容的高度自动设置

卡片模式

当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格

垂直排列

默认情况下,方向 direction 为 水平 horizontal。 通过设置 directionvertical 来让走马灯在垂直方向上显示。

属性名说明类型可选值默认值
heightcarousel 的高度string
initial-index初始状态激活的幻灯片的索引,从 0 开始number0
trigger指示器的触发方式stringhover/clickhover
autoplay是否自动切换booleantrue
interval自动切换的时间间隔,单位为毫秒number3000
indicator-position指示器的位置stringoutside/none
arrow切换箭头的显示时机stringalways/hover/neverhover
typecarousel 的类型stringcard
loop是否循环显示boolean-true
direction展示的方向stringhorizontal/verticalhorizontal
pause-on-hover鼠标悬浮时暂停自动切换boolean-true
motion-blur 2.6.0添加动态模糊以给走马灯注入活力和流畅性。boolean-false
事件名说明回调参数
change幻灯片切换时触发目前激活的幻灯片的索引,原幻灯片的索引
方法名说明参数
setActiveItem手动切换幻灯片需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-itemname 属性值
prev切换至上一张幻灯片
next切换至下一张幻灯片
插槽名说明子标签
-自定义默认内容Carousel-Item
属性名说明类型可选值默认值
name幻灯片的名字,可用作 setActiveItem 的参数string
label该幻灯片所对应指示器的文本string
插槽名说明
自定义默认内容

源代码

组件文档

贡献者