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>