本文来源于Element官方文档:
http://element-cn.eleme.io/#/zh-CN/component/carousel
基础用法
普通走马灯
默认 Hover 指示器触发
{{ item }}
Click 指示器触发
{{ item }}
组件― 走马灯
基础用法
默认 Hover 指示器触发
{{ item }}
Click 指示器触发
{{ item }}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
指示器
默认 Hover 指示器触发
{{ item }}
Click 指示器触发
{{ item }}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
切换箭头
默认 Hover 指示器触发
{{ item }}
Click 指示器触发
{{ item }}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
卡片化
{{ item }}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
方向
{{ item }}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
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 走马灯内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程!
原文链接:https://blog.csdn.net/sps900608/article/details/79463695