vue使用swiper插件

昨天搞这个插件，搞得我很生气！
我只是要个最简单的移动端轮播图，整的我心态本类

能够自动播放，循环就行。。
但是找了一圈，一直报错
还有就是，我获取图片是通过接口的，所以用到了v-for循环
就会出现无法循环播放问题
只要加上
v-show="banners.list.length"
banner.list是存放图片的一个数组
就行

我是在组件内导入，不是全局引入

安装

npm install vue-awesome-swiper@3 --save

引入，注册

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css";

components: {
    swiper,
    swiperSlide,
  },

就是在这里加
v-show=“banners.list.length”

html结构

  <swiper
      :options="swiperOption"
      class="swiper"
      ref="mySwiper"
      v-show="banners.list.length"
    >
      <swiper-slide v-for="(banner, index) in banners.list" :key="index">
        <img :src="banner.image" :title="banner.title" />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

data里的数据

swiperOption: {
        loop: true,//循环
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
      },