Carousel 走馬燈
在之前的走馬燈效果的實現中，由於使用的是js原生代碼實現走馬燈效果，導致實現效果頁面不美觀，代碼量大。
今天要介紹的是ELement ui 組件中的 Carousel 走馬燈。 其實現簡單，容易上手，且效果美觀。
首先安裝element ui
之后再
這樣我們就可以在vue頁面中使用
1 <el-carousel trigger="click" height="450px" style="width:600px;float:left;margin-left:60px;"> 2 <el-carousel-item v-for="item in images" :key="item" > 3 <!-- <h3 class="small">{{ item }}</h3> --> 4 <img :src="item.url"> 5 </el-carousel-item> 6 </el-carousel>
data中
1 images:[ 2 {url: require("../../img/1.jpg")}, 3 {url: require("../../img/2.jpg")}, 4 {url: require("../../img/3.jpg")}, 5 {url: require("../../img/4.jpg")}, 6 {url: require("../../img/5.jpg")}, 7 ]
這樣走馬燈的效果就直接實現了
還支持多種走馬燈效果
1 <el-carousel trigger="click" height="450px" type="card">
相關屬性
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 | — |
| loop | 是否循環顯示 | boolean | - | true |
| direction | 走馬燈展示的方向 | string | horizontal/vertical | horizontal |
Carousel Events
| 事件名稱 | 說明 | 回調參數 |
|---|---|---|
| change | 幻燈片切換時觸發 | 目前激活的幻燈片的索引，原幻燈片的索引 |
Carousel Methods
| 方法名 | 說明 | 參數 |
|---|---|---|
| setActiveItem | 手動切換幻燈片 | 需要切換的幻燈片的索引，從 0 開始；或相應 el-carousel-item 的 name 屬性值 |
| prev | 切換至上一張幻燈片 | — |
| next | 切換至下一張幻燈片 | — |
Carousel-Item Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| name | 幻燈片的名字，可用作 setActiveItem 的參數 |
string | — | — |
| label | 該幻燈片所對應指示器的文本 | string | — | — |