vue swiper从后台获取数据不可以拖动

首先这个轮播图需要直接的效果是一张图片居中显示，其余两张分别位于两边占一部分

效果图

首先用静态图片是可以实现的，但是如果是从后台获取的图片地址，会出现中间有，两边空白没有地址，或者是三张平铺，没有图以上的效果而且无法拖动

后来通过网上找到了解决方法，代码如下

swiperInit() {

        var mySwiper = new Swiper('.swiper-container', {

              loop: true,

              slidesPerView: 'auto',

              initialSlide:0,//用来设定页面加载完成时，第几张图片先显示出来

              centeredSlides: true,

              spaceBetween: 10,

              // observer:true,//修改swiper自己或子元素时，自动初始化swiper

              // observeParents:true,//修改swiper的父元素时，自动初始化swiper

          })

      },

getBanner() {

        let that = this;

        banner().then(res => {       

          this.imgList = res.data.data;

          that.$nextTick(function () {

            that.swiperInit();

          })

        });

      },

.page .swiper-container {

      padding: 10px 0;

      background: #fff;

      width: 100%; 

  }

  .page .swiper-wrapper .swiper-slide{

    width: 327px;

    border-radius: 5px;   

  }

  .page .swiper-image{

      border-radius: 5px;

      width: 327px;

      height: 170px;

  }