vue中用 ul 和 li 仿轮播图，可以播放图片和视频 ，亲测可用

话不多说，直接上代码 ( css部分省略 )

<img
   src="@/assets/img/leftBtn.png"
   alt=""
   @click="leftMove(index)"
   class="leftBtn"
 />
 <img
   src="@/assets/img/rightBtn.png"
   alt=""
   @click="rightMove(index)"
   class="rightBtn"
 />


<div class="swiper" >
    <ul :class="'swiper'+index" ref="swiperTotal">  
      <li
        v-for="(item, index) in data"
        :key="index"
      >
        <img
          :src="item.FilePath"
          v-if="
            item.FileType == 'jpg' ||
            item.FileType == 'bmp' ||
            item.FileType == 'png'
          "
          alt="index"
          style="height: 100%; width: 100%"
        />
        <video
          :src="item.FilePath"
          controls
          v-if="item.FileType == 'mp4'"
          style="height: 100%; width: 100%"
        >video>
      li>
    ul>
  div>

leftMove(index) {
     
   // 如果left的值为空时，直接取值，如果left的值带px时，需要先删除px再取值
   // 因为有时候left的值可能为 null
   if(this.$refs.swiperTotal[index].style.left ==  null){
     
     // aa如果定义在data中的话，可能会造成重复增加的效果。
     var aa = this.$refs.swiperTotal[index].style.left
   }else{
     
     var aa = this.$refs.swiperTotal[index].style.left.slice(0,-2)
   }
   // 大于三个的时候可以轮播
   if (this.audioTotal[index].FileList.length >= 3) {
     
     var totalLength = (this.audioTotal[index].FileList.length - 3) * 100;
     var aa = Number(aa) + 105
     if(aa > totalLength){
     
       aa = 0
     }
   } else if (this.audioTotal[index].FileList.length < 3) {
     
     // 小于三个的时候不可以轮播
     aa = 0;  
   }
   // 此处的ref就是为了循环给轮播图定义向左向右滚动，防止重复 
   this.$refs.swiperTotal[index].style.left =  aa  + 'px'
 },
 
 rightMove(index) {
     
   if(this.$refs.swiperTotal[index].style.left ==  null){
     
     var aa = this.$refs.swiperTotal[index].style.left
   }else{
     
     var aa = this.$refs.swiperTotal[index].style.left.slice(0,-2)
   }
   // 大于三个的时候可以轮播
   if (this.audioTotal[index].FileList.length >= 3) {
     
     if(aa < 0){
     
       aa = 0
     }
     var aa = Number(aa) - 105
   } else if (this.audioTotal[index].FileList.length < 3) {
     
     // 小于三个的时候不可以轮播
     aa = 0;  
   }
   this.$refs.swiperTotal[index].style.left =  aa  + 'px'
 },