vue awesome swiper 轮播图 循环不了 无法自动播放 loop无效 autoplay无效 蓝圈 解决办法

vue awesome swiper 轮播图循环不了 无法自动播放 loop无效 autoplay无效 解决办法

出现问题：
1.轮播图无法自动播放
2.swiper-opagination为蓝色圈如何变成白色圈
3.loop无效

对应的解决办法：
1.autoplay:{
delay:1500,
disableOnInteraction:false
},
2.用代码块的样式
3.需要在swiper里加入v-if的判断
v-if=“topimages.length>1”

代码

<template>
     <div class="wrapper">
        <swiper v-if="topimages.length>1" class="swiper" :options="swiperOption">
          <swiper-slide class="swiper-item" v-for="(item,index) in topimages" :key="index">
            <img :src="item">
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import {swiper,swiperSlide} from 'vue-awesome-swiper'
export default {
    name: "DetailSwiper",
    props:{
        topimages:{
            type:Array,
            default(){
                return []
            }
        }
    },
    components:{
      swiper,
      swiperSlide
    },
    data() {
    return {
       swiperOption: {
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay:{
            delay:1500,
            disableOnInteraction:false
          },
          loop:true,

       }
      }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper >>>.swiper-pagination-bullet-active  //看这里
    background :#ffffff
.wrapper
    width :100%
.wrapper img
    width:100%
.swiper
    height 250px
    overflow :hidden
</style>