<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
 <!-- slides -->
 <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
      </swiper-slide>
 <!-- Optional controls -->
 <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
 export default {
    name: 'HomeSwiper',
 props: {
      swiperList: Array
    },
 data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
 loop: true,
 autoplay:true,
 speed:1000
 }
      }
    },
 computed: {
      showSwiper () {
        return this.swiperList.length
 }
    }
  }
</script>

<style lang="stylus" scoped>
 .wrapper >>> .swiper-pagination-bullet-active
 background: #fff

 .wrapper
 overflow: hidden
 width: 100%
    height: 0
 padding-bottom: 31.5%
    background: #eee
 .swiper-img
 width: 100%
</style>