VUE中引入vue-awesome-swiper 不自动播放的问题

<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>

 

posted on 2018-03-05 15:26  水好凉  阅读(447)  评论(0编辑  收藏  举报

导航