Element-Ui元件（四十二）Carousel 走馬燈

本文來源於Element官方文件：

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

基礎用法

普通走馬燈

  <div class="block">
    <span class="demonstration">預設 Hover 指示器觸發</span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="block">
    <span class="demonstration">Click 指示器觸發</span>
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>

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	—	—