Vue项目中swiper轮播active图片居中并放大

项目中用的是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
            }
        },
	}
}