swiper

<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- 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',
          loop: true,   //让轮播插件 支持 循环轮播
        }
      }
    },
    computed: {
      showSwiper () {
        return this.list.length;
      }
    }
  }
</script>
<style lang="stylus" scoped>
  /*'>>>'  使得具有一个穿透*/
  .wrapper >>> .swiper-pagination-bullet-active
    background :#fff!important
  .wrapper
    overflow : hidden
    width : 100%
    height : 0
    padding-bottom : 25.32%     // 控制宽高比例 自适应  总共4行代码   或者 去掉 overflow padding-bottom  设置 height：31.25%vw  但是存在浏览器兼容问题
    .swiper-img
      width:100%
</style>