1.previous-margin next-margin设置上一个下一个间距
2.autoplay="true"设置自动播放，优化第一张显示问题，circular="true"设置自动衔接
3.所有图片scale设置0.9 ，transform:scale(0.9);当前为1transform:scale(1);
4.用@change="changehandler"事件，可以监听到当前自动播放的索引
<swiper duration="1000" @change="changehandler" class="swiper" circular="true" style="width:750rpx;height:950rpx;" previous-margin="120rpx" next-margin="120rpx">
<swiper-item class="hcc" v-for="item in 10" :key="item">
<img :class="{current:cur==index,other:cur!=index}" class="item small" src="http://192.168.1.240:8080/jzbstatic/img/index.jpg" />
</swiper-item>
</swiper>
.swiper {
background: rgb(209, 191, 191);
}
.small {
transform: scale(0.9);
opacity: 0.6;
}
.current {
transform: scale(1);
opacity: 8;
z-index: 100;
}
.item {
border-radius: 30rpx;
width: 561rpx;
height: 936rpx;
transition: transform 1s, opacity 0.3s;
// border: 1rpx gray solid;
}
<script>
export default {
data() {
return {
message: "",
cur: 0
};
},
components: {},
methods: {
changehandler(e) {
this.cur = e.mp.detail.current;
}
},
created() {}
};
</script>