vue项目使用swiper自动播放，前进后退按钮失效

一.下载

npm:

npm install swiper --save

yarn

yarn add swiper

二.引入

因为是一个页面使用，所以局部引入啦

在script引入：

import Swiper from 'swiper'

在style引入：

（此处是5.4.5版本的css路径）

@import "../../node_modules/swiper/css/swiper.css";

三.页面使用

mounted () {
 this.initSwiper()
},
methods: {
  initSwiper () {
    new Swiper('.swiper-container', {
      loop: true,
      slidesPerView: 4,
      autoplay: {
        delay: 1000
      } ,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    })
  }
}

但是自动播放，前进退按钮一直没有起作用，折腾了几天，查了好久的资料，还是没有作用。

最后，居然是版本问题！！！！

因为直接下载swiper，我默认下载的版本是6.2.1

我遇到的这种情况，卸载swiper，安装低版本

npm install swiper@5.4.5

yarn add swiper@5.4.5

网上说这个版本兼容性是最好的，唉，总算解决啦~~~

希望能帮到你哦~~