vue使用vue-awesome-swiper轮播插件

先安装插件

npm install vue-awesome-swiper --save

在全局使用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

在组件中使用

import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");

export default {
  components: {
    swiper,
    swiperSlide
  }
}

<template>
	<div class="recommend">
		<div class="silder">
		<swiper :options="swiperOption"  v-if="recommendList.length>0">
			<swiper-slide v-for="(slide, index) in recommendList" :key="index">
				<img :src="slide.picUrl" alt="" style="width: 100%;height: 160px;">
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		  </swiper>
   
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination">
		
	</div>

  
  </swiper>
					
	
		</div>
	</div>
</template>
<script>
	import {getRecommend} from '../../api/recommend.js';
	import { swiper, swiperSlide } from "vue-awesome-swiper";
	require("swiper/dist/css/swiper.css");

	export default{
		name:'recommend',
		data(){
			var that=this;
			return {
				recommendList:[],
				// //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
				swiperOption: {
					autoplay:{
						disableOnInteraction: false,
						delay: 1000,
					},
					loop:true,
					preventLinksPropagation:false,
					pagination: {
						el: '.swiper-pagination'
					}
				}
			}
		},
		components:{
			swiper,
			swiperSlide
		},
		
	}
</script>

这里有个问题就是滑动后幻灯片没有继续滑动了，需要在swiper标签中加入v-if需要在autoplay中加入disableOnInteraction: false,

git地址：https://github.com/surmon-china/vue-awesome-swiper

git中的案例

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    mounted() {
      setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    }
  }
</script>	

配置参考文章：https://blog.csdn.net/dwb123456123456/article/details/82701740