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

本文介绍: 6.1、解决没有分页器分页器出不出现，点击有没有效果；很大的情况下分页器不出现，可能就是这个的影响。一定要加上click a ble: true，这样点击分页器，才有效！（下方有完整代码）6.2、解决不自动播放Aut o play:能不能自动播放就靠他！6.3、解决点击前进后退按钮不起作用前进、后退按钮点击有没有效果；如果没有他，只有样式，点击不起作用

1、下载swiper6版本的swiper

2、引入swiper的样式

3、轮播图的内容

4、引入组件

        &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>

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秒切换一次
            }
          })
        })
      }
    }
  }