vue使用swiper踩坑（轮播图不自动播放，上一张下一张按钮不起作用）

为了不浪费大家时间，先说一下，最后解决办法是使用vue-awesome-swiper，并且要注意版本号及其对应的API，本文中的API写法和3.1.3版本的vue-awesome-swiper是对应的，可以实现轮播图自动播放以及前一张后一张按钮 不失效。

一个心路历程

准备使用swiper实现轮播图

• 根据Swiper API官网：

1. 首先，安装依赖包

$ npm install swiper

2. 导包及使用

// import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  const swiper = new Swiper('.swiper-container', {
   
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
   
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
   
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
   
    el: '.swiper-scrollbar',
  },
});

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div