Element Carousel 走马灯的具体实现

本文来源于Element官方文档:

http://element-cn.eleme.io/#/zh-CN/component/carousel

基础用法

普通走马灯

默认 Hover 指示器触发

{{ item }}

Click 指示器触发

{{ item }}

组件— 走马灯

基础用法

Element Carousel 走马灯的具体实现_第1张图片



指示器

Element Carousel 走马灯的具体实现_第2张图片



切换箭头

Element Carousel 走马灯的具体实现_第3张图片



卡片化

Element Carousel 走马灯的具体实现_第4张图片



方向

Element Carousel 走马灯的具体实现_第5张图片



Carousel Attributes

参数 说明 类型 可选值 默认值
height 走马灯的高度 string
initial-index 初始状态激活的幻灯片的索引,从 0 开始 number 0
trigger 指示器的触发方式 string click
autoplay 是否自动切换 boolean true
interval 自动切换的时间间隔,单位为毫秒 number 3000
indicator-position 指示器的位置 string outside/none
arrow 切换箭头的显示时机 string always/hover/never hover
type 走马灯的类型 string card

Carousel Events

事件名称 说明 回调参数
change 幻灯片切换时触发 目前激活的幻灯片的索引,原幻灯片的索引

Carousel Methods

方法名 说明 参数
setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-item 的 name 属性值
prev 切换至上一张幻灯片
next 切换至下一张幻灯片

Carousel-Item Attributes

参数 说明 类型 可选值 默认值
name 幻灯片的名字,可用作 setActiveItem 的参数 string
label 该幻灯片所对应指示器的文本 string

到此这篇关于Element Carousel 走马灯的具体实现的文章就介绍到这了,更多相关Element Carousel 走马灯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Element Carousel 走马灯的具体实现)