话不多说上图
html部分
<swiper
:autoplay="true"
:current="currentIndex"
:circular="true"
previous-margin="80rpx"
next-margin="80rpx"
:interval="3000"
:duration="100"
@change="swierChange"
>
<swiper-item v-for="(item,i) in 5" :key="i">
<image src="../../static/images/banner.png" class="slide-image" :class="currentIndex === i?'active':''"></image>
</swiper-item>
</swiper>
script部分
data(){
return{
currentIndex: 0
}
}
methods:{
swierChange(e){
this.currentIndex = e.detail.current
},
}
css部分
.slide-image {
position: absolute;
height: 200rpx;
width: 570rpx;
border-radius: 15rpx;
z-index: 5;
opacity: 0.7;
top: 18%;
margin: 0 20rpx;
}
swiper {
height: 430rpx;
}
.active {
opacity: 1;
z-index: 10;
height: 316rpx;
width: 572rpx;
top: 7%;
transition: all 0.2s ease-in 0s;
}
这样 效果就完成了