Carousel 走馬燈

在有限空間內，循環播放同一類型的圖片、文字等內容

 

基礎用法

 

適用廣泛的基礎用法

結合使用el-carousel和el-carousel-item標簽就得到了一個走馬燈。幻燈片的內容是任意的，需要放在el-carousel-item標簽中。默認情況下，在鼠標 hover 底部的指示器時就會觸發切換。通過設置trigger屬性為click，可以達到點擊觸發的效果。

<template>
  <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>
</template>

<style>
  .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;
  }
</style>

 

指示器

 

可以將指示器的顯示位置設置在容器外部

indicator-position屬性定義了指示器的位置。默認情況下，它會顯示在走馬燈內部，設置為outside則會顯示在外部；設置為none則不會顯示指示器。

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

切換箭頭

可以設置切換箭頭的顯示時機

arrow屬性定義了切換箭頭的顯示時機。默認情況下，切換箭頭只有在鼠標 hover 到走馬燈上時才會顯示；若將arrow設置為always，則會一直顯示；設置為never，則會一直隱藏。

<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

卡片化

當頁面寬度方向空間空余，但高度方向空間匱乏時，可使用卡片風格

將type屬性設置為card即可啟用卡片模式。從交互上來說，卡片模式和一般模式的最大區別在於，可以通過直接點擊兩側的幻燈片進行切換。

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .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;
  }
</style>

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