swiper3D效果

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>