解决在vue2上使用swiper6出现的问题（自动播放，前进后退按钮，分页器）完整版

        &lt;!--banner轮播--&gt;
        &lt;div class="swiper-container" id="mySwiper"&gt;
          &lt;div class="swiper-wrapper"&gt;
            &lt;div class="swiper-slide" v-for="item in bannerList" :key="item.id"&gt;
              <img :src=item.imgUrl />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

4、引入组件

这一步是关键，一定要注意！！！

4.1、引入

import { Swiper, Na viga ti on, Pagi nation, Auto play } fro m ‘swiper’

4.2、使用

Swiper.use([Na vigation, Pagi nat ion, Auto play])

4.3、解释：

4.3.1、Nav ation:前进、后退按钮点击有没有效果；如果没有他，只有样式，点击不起作用

4.3.2、Pagi nat ion:分页器出不出现，点击有没有效果；很大的情况下分页器不出现，可能就是这个的影响。

一定要加上click able: true，这样点击分页器，才有效！（下方有完整代码）

4.3.3、Auto play:能不能自动播放就靠他！

注意：在this.$nextTic k之后使用就行，这个在接下来的一步中。

5、使用 watch和this.$nextTic k

watch的作用：监听 banner的数据，等有了数据之后再创建swiper的实例

this.$nextTic k的作用：等v-for遍历循环之后，再执行回调函数

5.1、这两个的作用：

1 、确保有banner 轮播图的数据

2、页面中轮播图的结构有了之后，再初始化swiper实例

5.2、使用 方法：

watch: {
    // 使用watch监听一下bannerList的数据，从没有到有
    bannerList: {
      handler() {
        // 能到这里说明bannerList已经有数据了
        // 但是必须v-for遍历循环之后（结构有了之后）再new Swiper才行
        this.$nextTick(() => {
          Swiper.use([Navigation, Pagination, Autoplay])
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            direction: 'horizontal' /*横向滑动*/,

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            autoplay: {
              delay: 1000 //1秒切换一次
            }
          })
        })
      }
    }
  }