Vue实现有分页的icon轮播区域

用Vue仿造去哪儿App时，首页中间有一个Icon区域。如下图

这个区域可以看到8个图标，但它并不止8个，还能滑动翻到下一页。
滑动轮播可以使用vue-awesome-swiper,按照github上的指引操作，非常简单的就实现了轮播图效果。

1.首先来实现这个区域的布局。

HTML

 <div class="icons">
      <swiper>
       <!-- 第一个icon -->
         <swiper-slide>
          <div class="icon">
            <div class="icon-img">
              <img  src="图片地址" class="icon-img-content">
            </div>
            <p class="icon-desc">景点门票</p>
          </div>
        </swiper-slide>
         <!-- 第二个icon -->
        <swiper-slide>
          <div class="icon">
            <div class="icon-img">
              <img  src="图片地址" class="icon-img-content">
            </div>
            <p class="icon-desc">景点门票</p>
          </div>
        </swiper-slide>
        <!-- 轮播图的点 -->
         &l