1. First post the class of the element.ui revolving lantern component, you can directly assign and modify it: (Remember to use if there is an inline style !important)
/* 走马灯每个item */
.el-carousel__item{
}
/* 走马灯当前展示的item */
.is-active{
}
/* 走马灯item的容器 */
.el-carousel__container{
}
/* 整个走马灯的容器，包含指示器等其它组件在内 */
.el-carousel{
}
2. The revolving lantern dynamically adapts to the width and height of the screen: (specific details can be adjusted according to needs)
1) First modify the width of the item:
.el-carousel__item{
width: 80%;
left: -15%;
}
2) Adaptive height:
-
Add dynamic item attributes in the item tag:
:height=" bannerHeight + 'px' " -
Add the above
bannerHeightattributes andscreenWidthattributes to Vue databannerHeight : 100,//图片父容器的高度 screenWidth :0,//屏幕的宽度 -
Add a method to dynamically assign these two values in data:
- Get the width of the screen in mounted and assign it to screenWidth,
mounted:function() { this.screenWidth = window.innerWidth; this.setSize(); window.onresize = () =>{ this.screenWidth = window.innerWidth; this.setSize(); }; },- Calculate the height dynamically in the methods method:
methods:{ setSize:function () { // 通过屏幕宽度(图片宽度)计算高度 this.bannerHeight = 400 / 1920 * this.screenWidth; }, }
3. Post the complete code:
<div id="app">
<template>
<el-carousel :interval="4000" type="card" arrow="never" :height="bannerHeight + 'px'" :autoplay="autoplay" ref="carousel">
<el-carousel-item v-for="item in carouseData" :key="item.id" :id="item.id">
<img class="element-img" alt="" :src="item.url">
</el-carousel-item>
</el-carousel>
</template>
</div>
var vm = new Vue({
el:"#app",
data(){
return:{
bannerHeight : 100,//图片父容器的高度
screenWidth :0,//屏幕的宽度
}
},
mounted:{
this.screenWidth = window.innerWidth;
this.setSize();
window.onresize = () =>{
this.screenWidth = window.innerWidth;
this.setSize();
};
},
methods:function(){
setSize:function () {
// 通过屏幕宽度(图片宽度)计算高度
this.bannerHeight = 400 / 1920 * this.screenWidth;
},
}
})