本文來源于Element官方文檔：

基礎用法

普通走馬燈

默認 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 走馬燈內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們！

時間： 2020-07-25

總結

以上是生活随笔為你收集整理的element走马灯自动_Element Carousel 走马灯的具体实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。