<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide><img src="../assets/images/home/1.jpg" style="width:100%" /></swiper-slide>
<swiper-slide><img src="../assets/images/home/2.jpg" style="width:100%" /></swiper-slide>
<swiper-slide><img src="../assets/images/home/3.jpg" style="width:100%" /></swiper-slide>
<swiper-slide><img src="../assets/images/home/4.jpg" style="width:100%" /></swiper-slide>
<!-- Optional controls -->
</swiper>
</template>
<script>
// swiper options example:
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'carrousel',
data () {
return {
swiperOption: {
autoplay: true, /////////////////////////////////////// 把这里的3000改为true就可以了、
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl: true,
autoplayDisableOnInteraction: false,
observeParents: true,
loop: true,
observer: true
}
}
},
// 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象,同时notNextTick必须为true
components: {
swiper,
swiperSlide
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
mounted () {
}
}
</script>