<template>
<div class="carousel-wrap">
<el-carousel :interval="5000" arrow="always" :height="banH + 'px'">
<el-carousel-item v-for="item in bannerList" :key="item.id">
<img :src="item.img" class="picImg" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
banH: 300, // 轮播图基础高度
bannerList: [
{ id: 0, img: require('../../assets/img/index/lunbo.jpg') },
{ id: 1, img: require('../../assets/img/index/lunbo.jpg') },
{ id: 2, img: require('../../assets/img/index/lunbo.jpg') },
{ id: 3, img: require('../../assets/img/index/lunbo.jpg') }
]
}
},
methods: {
setbanH () {
this.banH = 484 // 轮播图高度
}
},
mounted () {
this.setbanH()
}
}
</script>
<style scoped>
.carousel-wrap {
width: 100%;
height: 484px;
}
</style>
vue轮播图(可改变高度,图片可由后台返回)
最新推荐文章于 2023-10-04 17:09:17 发布