vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题

from：

https://blog.csdn.net/osdfhv/article/details/79062427

<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<swiper :options="swiperOption" ref="mySwiper">
<!-- 幻灯内容 -->
<swiper-slide :key="i" v-for="(str, i) in bannerList">
<img :src="str.picUrl" style="height:100%"/>
</swiper-slide>
<!-- 以下控件元素均为可选 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template><script type="text/ecmascript-6"> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default {
props: ['bannerList'],
data () {
return {
data: {},
swiperOption: {
// 所有配置均为可选（同Swiper配置）
initialSlide: 0,
pagination:'.swiper-pagination',//这里修改
// pagination: {
// el: '.swiper-pagination'
// },
loop: true,
speed: 400,
direction: 'horizontal',
paginationClickable: true,
mousewheelControl: true,
autoplay: 1000,//这里修改
//autoplay: true,
autoplayDisableOnInteraction: false,
observer: true,
observeParents: true,
debugger: true,
onTransitionStart (swiper) {
console.log(swiper)
}
}
}
},
mounted () {
// 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
this.swiper.slideTo(1, 1000, false)
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
components: {
swiper,
swiperSlide
}
}
</script><style lang="stylus" rel="stylesheet/stylus">
.swiper-container {
width: 100%
height: 10rem
.swiper-wrapper {
width: 100%
height: 100%
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 100%
height: 100%
img {
width: 100%
height: 100%
}
}
}
</style>


• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85

结果发现：不能自动轮播和导航器小圆点不显示