小程序轮播图中间大两边小

wxml

js

data:{
imgUrls: [
‘https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=749058170,2423062569&fm=15&gp=0.jpg’,
‘https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=749058170,2423062569&fm=15&gp=0.jpg’,
‘https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=749058170,2423062569&fm=15&gp=0.jpg’
],
circular: true,
leftMargin: ‘80rpx’,
rightMargin: ‘80rpx’,
currentIndex: 0
},
handleChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
},

wxss

.slide-image {
position: absolute;
height: 250rpx;
width: 570rpx;
border-radius: 15rpx;
z-index: 5;
opacity: 0.7;
top: 13%;
margin: 0 20rpx;
}

swiper {
height: 340rpx;
background: white;
}

.active {
opacity: 1;
z-index: 10;
height: 280rpx;
width: 570rpx;
top: 7%;
transition: all 0.2s ease-in 0s;
}