写在前面:网站轮播图建议使用swiper组件,非常方便快捷。vue轮播图插件之vue-awesome-swiper
接手一个项目,轮播图是用element-ui的carousel实现的,看起来效果还不错,只是固定宽高,并未做适配,于是将就代码做下修改,以适配各种显示器屏幕。
<el-carousel indicator-position="outside" :height="bannerHeight + 'px'">
<el-carousel-item v-for="(item,index) in BannerImg">
<img src="../../assets/images/banner1.jpg" v-if="index == 0" class="bannerImg" />
<img src="../../assets/images/banner2.jpg" v-if="index == 1" class="bannerImg" />
<img src="../../assets/images/banner3.jpg" v-if="index == 2" class="bannerImg" />
</el-carousel-item>
</el-carousel>
bannerHeight属性用