轮播图-1

首先在Home.vue中写入大概框架

<div id="hy-swiper">
  <div class="swiper" >
    <div class="swiper-item" v-for="item in banners">
      <a :href="item.link">
        <img :src="item.image" alt="">
      </a>
    </div>
  </div>
</div>

写入css代码
 #hy-swiper {
    position: relative;
  }

siper使用flex布局，此时多出的部分，我们给隐藏， overflow: hidden;    
  .swiper {
    display: flex; 
    overflow: hidden; 
  }
 

进行提取分离
在Swiper.vue   注释可以去掉
  <div id="hy-swiper">
<!--    <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">-->
    <div class="swiper">
      <slot></slot>
      <!--      <div class="swiper-item" v-for="item in banners">-->
      <!--        <a :href="item.link">-->
      <!--          <img :src="item.image" alt="">-->
      <!--        </a>-->
      <!--      </div>-->
    </div>
  </div>

/* swiper  */
  #hy-swiper {
    position: relative;
  }

  .swiper {
    display: flex;
    overflow: hidden;
  }


在SwiperItem.vue
<div class="swiper-item">
  <slot></slot>
</div>

在Home.vue里改变成
<swiper>
  <swiper-item v-for="item in banners">
    <a :href="item.link">
      <img :src="item.image" alt="">
    </a>
  </swiper-item>
</swiper>