vue轮播图实现

1.先安装组件 cnpm install vue-awesome-swiper;

2.在main.js下引入文件：

　import VueAwsomeSwiper from 'vue-awesome-swiper';

   Vue.use(VueAwsomeSwiper);

//创建组件banner.vue

<template>

       <div>

　　  <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper" class="banner">

       <swiper-slide v-for="item in listImg">        <a :href="item.linkUrl"><img class="banner-img" :src="item.picUrl" /></a>      </swiper-slide      <div class="swiper-pagination" slot="pagination"></div>    </swiper>  </div</template>

<script type="text/ecmascript-6">
　　import {swiper,swiperSlide} from 'vue-awesome-swiper';
　　require('swiper/dist/css/swiper.css');  //轮播样式
　　export default{
　　　　props:['listImg'],
　　　　data(){
　　　　　　notNextTick:true,
　　　　　　swiperOption:{
　 　　　　　　　autoplay: true,
　　　　　　　　direction: 'horizontal',
　　　　　　　　loop:true,

　　　　　　　　grabCursor: true,

　　　　　　　　setWrapperSize: true,
　　　　　　　　autoHeight: true,
　　　　　　　　pagination: '.swiper-pagination',
　　　　　　　　paginationClickable: true,
　　　　　　　　mousewheelControl: true,
　　　　　　　　observeParents: true,
　　　　　　　　onTransitionStart(swiper) {
 　　　　　　　　 console.log(swiper)
　　　　　　　　}

　　　　　　}

　　　　},
　　　　

　　　　computed: {
 　　　　　　 swiper(){
  　　　　　　  return this.$refs.mySwiper.swiper;
 　　　　　　 }
　　　　},

　　　　mounted(){
  　　　　this.swiper.slideTo(0, 0, false)
　　　　},
　　　　

　　　　components: {
 　　　　 swiper,
  　　　　swiperSlide
　　　　},

　
　　}

</script>