vue-awesome-swiper实现轮播图

1.首先通过npm安装vue-awesome-swiper，我在项目中用的是2.6.7版本

npm install vue-awesome-swiper@2.6.7 –save

2. 在main.js中引入

   import VueAwesomeSwiper from ‘vue-awesome-swiper’

   import ‘swiper/dist/css/swiper.css’

   Vue.use(VueAwesomeSwiper)

3.使用

<template>
 <div class="wrapper">
 <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" >
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id">
       <img class="swiper-img" :src="item.imgUrl"/>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>
 
<script>
    export default {
        name:"HomeSwiper",
        props:{
          list:Array
        },
        data (){
           return{
            swiperOption:{
               pagination:".swiper-pagination",
               autoplay: 2000,
               loop:true,
               paginationClickable: true,
               observer:true,
               observeParents:true
            }
 
          }
        } ,
         computed: {
          showSwiper () {
          return this.list.length
        }
      }
    }
 
</script>
 
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background:#fff
  .wrapper
    overflow:hidden
    width:100%
    height 0
    padding-bottom:31.25%
    background:#eee
    .swiper-img
       width:100%
</style>