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
结果发现：不能自动轮播和导航器小圆点不显示