最近在做vue的项目过程中，使用了Swiper插件来实现轮播图轮播的效果，但是发现轮播图并不能自动轮播，并且左右按钮并不生效，不能进行轮播图的切换。

代码如下：

methods: {
    // 国际馆轮播图
    guojiHallLunbo() {
      var swiper = new Swiper('.mm-guoji-producetype .swiper-container', {
        slidesPerView: 1,
	    spaceBetween: 0,
        loop: true,
        autoplay : true,
	    autoplayDisableOnInteraction:false,
	    disableOnInteraction: true,
	    observer: true,	
	    observeParents: true,
	    pagination: '.swiper-pagination',
        paginationClickable :true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
      });
    },
},

mounted: function(){
    this.guojiHallLunbo();
},

最后查阅了很多资料才发现，在实际项目里使用autoplay：1000 并不能实现自动轮播的效果，看到 作者sun6sian的文章，我的问题才迎刃而解。需要把autoplay：1000改为autoplay：true才能实现；左右按钮点击失效，所以需要把内容写在navigation中才可以。

更改后的代码如下：

    // 国际馆轮播图
    guojiHallLunbo() {
      var swiper = new Swiper('.mm-guoji-producetype .swiper-container', {
        slidesPerView: 1,
	    	spaceBetween: 0,
        loop: true,
        speed: 1000,
        autoplay : true,
	    	autoplayDisableOnInteraction:false,
	    	disableOnInteraction: true,
	    	observer: true,	
	    	observeParents: true,
	    	pagination: '.swiper-pagination',
        paginationClickable :true,
        mousewheelControl: true,
        debugger: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      });
    },

为了方便以后做项目的过程中，不在同样的问题上纠结，所以记录一下。

附上Swiper官网的文档：https://3.swiper.com.cn/api/index.html