vue elementUI 幻燈片, 輪播圖簡單實例
這里是針對的寬屏圖片,所以采用的是背景圖片居中, 如果是一般的圖片, 可以直接img + src屬性就OK了
1. 在vue組件文件中
<template>
<div class="home">
<el-carousel :interval="5000" height="478px" arrow="always">
<el-carousel-item v-for="item in imgs" :key="item"
:style="'background:url('+item+') no-repeat center'">
</el-carousel-item>
</el-carousel>
</div>
</template>2, js內容
export default {
name: 'Home',
data(){
return {
imgs:[
require("../assets/images/slide01.jpg"),
require("../assets/images/slide02.jpg"),
require("../assets/images/slide03.jpg")
//注意: 這里一定 require, 不能直接寫地址
]
}
}
}3, 效果如下:
