Vue之网易云音乐PC版轮播图的实现

最近在刷网易云音乐歌单时发现首页的轮播图很有意思，正好自己想尝试做一个PC版的网易云音乐，于是就是使用Vue去做这个demo，废话少说，我要出招了，接招吧

页面的DOM结构

<template>
  <div class="slider-container" ref='slider'
       :style="sliderStyle"
       @mouseover="pause()"
       @mouseout="play()">
    <div class="slider-content" :class="mask ? 'mask' : ''">
      <div class="slider" v-for="(item, index) in list"
        :key="index"
        :class="setClass(index)"
        @click="onClick(index)" :style="setBGImg(item.src)">
      </div>
      <i v-show="arrow" class="iconfont icon-left" @click="prev()"></i>
      <i v-show="arrow" class="iconfont icon-right" @click="next()"></i>
    </div>
    <div class="dots" v-if="dots">
      <span v-for="(item, index) in list" :key="index"
        :style="setActiveDot(index)"
        @mouseover="currentIndex = index"></span>
    </div>
  </div>
</template>

Slider-container的样式(Stylus)

.slider-container
  width: 100%
  height: 100%
  text-align