parte html
<view class="">
<swiper :autoplay="false" :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx"
:interval="3000" :duration="500" @change="swierChange">
<swiper-item v-for="(item,i) in 5" :key="i">
<image src="../../static/logo.png" class="slide-image" :class="currentIndex === i?'active':''"></image>
</swiper-item>
</swiper>
</view>
js parte
<script>
export default {
name: "",
data() {
return {
currentIndex: 0
}
},
methods: {
swierChange(e){
this.currentIndex = e.detail.current
},
},
}
</script>
parte css
<style>
.slide-image {
position: absolute;
height: 200rpx;
width:75vw;
z-index: 5;
opacity: 0.8;
top: 18%;
margin: 0 20rpx;
}
swiper {
height: 60vw;
}
.active {
opacity: 1;
z-index: 10;
height: 320rpx;
width: 75vw;
top: 7%;
transition: all 0.2s ease-in 0s;
}
</style>
