Element UI 走马灯 轮播图 移动端实现手指滑动

 <el-carousel :interval="4000" type="card" ref="slideCarousel">
        <el-carousel-item v-for="item in banner1" :key="item">
                 <img :src="item" class="medium" alt="">
         </el-carousel-item>
</el-carousel>

mounted() {
      if (this.$refs.slideCarousel) this.slideBanner()
    },  
    methods:{
      slideBanner() {
        //选中的轮播图
        var box = document.querySelector('.el-carousel__container');
        var startPoint = 0;
        var stopPoint = 0;
        //重置坐标
        var resetPoint = function () {
          startPoint = 0;
          stopPoint = 0;
        }
        //手指按下
        box.addEventListener("touchstart", function (e) {
          //手指点击位置的X坐标
          startPoint = e.changedTouches[0].pageX;
        });
        //手指滑动
        box.addEventListener("touchmove", function (e) {
          //手指滑动后终点位置X的坐标
          stopPoint = e.changedTouches[0].pageX;
        });
        //当手指抬起的时候，判断图片滚动离左右的距离
        let that = this
        box.addEventListener("touchend", function (e) {
          if (stopPoint == 0 || startPoint - stopPoint == 0) {
            resetPoint();
            return;
          }
          if (startPoint - stopPoint > 0) {
            resetPoint();
            that.$refs.slideCarousel.next();
            return;
          }
          if (startPoint - stopPoint < 0) {
            resetPoint();
            that.$refs.slideCarousel.prev();
            return;
          }
        });
      }

}