vue swiper

自己用的轮播图、：踩了好多坑

<template>
  <div>
    <swiper :options="swiperOption"  ref="mySwiper" class="my-swiper">
      <!-- 这部分放你要渲染的那些内容 -->
      <swiper-slide v-for="item in items">
        <img :src="item" alt="">
      </swiper-slide>
      <!-- 这是轮播的小圆点 -->
      <div class="swiper-pagination"  slot="pagination"></div>
      <!--这是上下翻页-->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>


    </swiper>
  </div>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  import 'swiper/dist/css/swiper.css'
  import pic1 from '../assets/swiper/sky.jpg'
  import pic2 from '../assets/swiper/ocean.jpg'
  import pic3 from '../assets/swiper/land.jpg'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          // 分页按钮
          pagination: {
            el: '.swiper-pagination'
          },
          //前后循环
          loop:true,
          //这个属性加入使得 轮播图触摸之后可以重新播放
          autoplay:{
            disableOnInteraction: false,
          },
          // 上下翻页
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          // 速度
          speed:1000,
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 30,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
            this.page = swiper.realIndex+1;
            this.index = swiper.realIndex;
          }
        },
        items:[pic1,pic2,pic3]
      }
    },
    // //定义这个sweiper对象
    // computed: {
    //
    //   swiper() {
    //     return this.$refs.mySwiper.swiper;
    //   }
    // },
    // mounted () {
    //   //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
    //   this.swiper.slideTo(0, 0, false);
    // }

  }
</script>
<style scoped>
.my-swiper{
  width: 600px;
  height: 250px;
  margin: 0 auto;

}
  .my-swiper img{
    width: 100%;
    height: 100%;
  }
</style>