element走马灯自动_Element Carousel 走马灯的具体实现

本文来源于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