Carousel 走马灯

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

基础用法

动态模糊 2.6.0

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

指示器

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

切换箭头

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

自动高度

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

卡片模式

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

垂直排列

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

属性名说明类型Default
heightcarousel 的高度string''
initial-index初始状态激活的幻灯片的索引,从 0 开始number0
trigger指示器的触发方式enumhover
autoplay是否自动切换booleantrue
interval自动切换的时间间隔,单位为毫秒number3000
indicator-position指示器的位置enum''
arrow切换箭头的显示时机enumhover
typecarousel 的类型enum''
cardScale 2.7.8当 type 为 card时,二级卡的缩放大小number0.83
loop是否循环显示booleantrue
direction展示的方向enumhorizontal
pause-on-hover鼠标悬浮时暂停自动切换booleantrue
motion-blur 2.6.0添加动态模糊以给走马灯注入活力和流畅性。booleanfalse
事件名说明类型
change当前展示的幻灯片切换时触发,它有两个参数, 一个是新幻灯片的索引,另一个是旧幻灯片的索引Function
插槽名说明子标签
default自定义默认内容Carousel-Item
方法名说明类型
activeIndex 2.7.8当前幻灯片的索引number
setActiveItem手动切换幻灯片,传入需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-itemname 属性值Function
prev切换至上一张幻灯片Function
next切换至下一张幻灯片Function
属性名说明类型默认值
name幻灯片的名字,可用作 setActiveItem 的参数string''
label该幻灯片所对应指示器的文本string / number''
插槽名说明
default自定义默认内容

源代码

组件样式文档

贡献者