项目中用的是vue-awesome-swiper,vue-awesome-swiper是基于swiper 4.0的。所以参数参考swiper 4.0。
使用场景如下
要求左右切换时每次只移动一个图片,中间的图片始终放大,其他图片有不透明度。
解决思路
在官方文档中,active slide默认是居左的,通过把centeredSlides设置为true可以使其居中,但是左边会空着。解决思路就是,在第一张时候手动去设置位移的距离。
代码如下
template部分:
<div class="swiper-father swiper-hot">
<swiper :options="swiperOption" ref="mySwiper" v-if="homeData[5]">
<swiper-slide
v-for='(item,index) in homeData[5]'
:key="index">
<img @click="goInto(item.id)" :src="item.imgUrl">
</swiper-slide>
</swiper>
<div class="swiper-button-prev btn-swiper swiper-button" slot="button-prev"></div>
<div class="swiper-button-next btn-swiper swiper-button" slot="button-next"></div>
</div>
data部分:
data() {
swiperOption: {
slidesPerView: 3, // 显示数量
centeredSlides:true, // 重点:让active slide居中
loop : true, //循环轮播
navigation: { // 左右按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on:{
init(){
this.setTranslate(0);
},
transitionStart(){ // 开始translate之前触发
// 如果是第一张
if(this.activeIndex == 0){
this.setTranslate(0); // 因为左边会空出一张图的距离,所以设置位移为0
}
},
}
}