vue+elementUI 走马灯自定义（指示器设为圆点，设置手动滑动切换）

想要的效果如图

可手动切换轮播。

项目背景，vue项目。

一、自定义指示器样式

.el-carousel__indicator--horizontal .el-carousel__button {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }  
 .el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }

说明：以上代码放置在项目 的App.vue中

二、滑动切换效果

展示跑马灯的vue页面中：

说明：可以贴上直接使用， 注意ref="carousel" 后面会使用。

data中不需要设置字段。

mounted() {
    this.slideBanner()/*轮播手滑切换*/
  },

 methods中设置三个方法

methods: {
    /*轮播手滑切换*/
    startAuto() {
      if (this.autoplay == false) {
        this.autoplay = true;
      }
    },
    stopAuto() {
      if (this.autoplay == true) {
        this.autoplay = false;
      }
    },
    slideBanner() {
      let that = this
      //选中item的盒子
      var box = document.querySelector('.el-carousel__container');
      //手指起点X坐标
      var startPoint = 0;
      //手指滑动重点X坐标
      var stopPoint = 0;

      //重置坐标
      var resetPoint = function () {
        startPoint = 0;
        stopPoint = 0;
      }

      //手指按下
      box.addEventListener("touchstart", function (e) {
        //手指按下的时候停止自动轮播
        that.stopAuto();
        //手指点击位置的X坐标
        startPoint = e.changedTouches[0].pageX;
      });
      //手指滑动
      box.addEventListener("touchmove", function (e) {
        //手指滑动后终点位置X的坐标
        stopPoint = e.changedTouches[0].pageX;
      });
      //当手指抬起的时候，判断图片滚动离左右的距离
      box.addEventListener("touchend", function (e) {
        console.log("1：" + startPoint);
        console.log("2：" + stopPoint);
        if (stopPoint == 0 || startPoint - stopPoint == 0) {
          resetPoint();
          return;
        }
        if (startPoint - stopPoint > 0) {
          resetPoint();
          that.$refs.carousel.next();
          return;
        }
        if (startPoint - stopPoint < 0) {
          resetPoint();
          that.$refs.carousel.prev();
          return;
        }
      });
    },

 说明：以上方法可以直接粘贴使用，对大神的原文进行了修改，let that = this 。

内容仅为本人开发中记录过程。

参考文章链接如下：

1、​​​​​​​手滑原文链接：Element.ui【走马灯】实现用手指可以左右滑动_你好像很好吃a的博客-CSDN博客_element走马灯纵向滑动1、element.ui实现用手可以左右滑动（或上下滑动），看了一下官网没有提供这样的功能，上网上查了一些资源也没有看到，后来想着换插件太麻烦了，决定手写一个。2、思路：为走马灯的item容器做一个监听事件，监听并获取到手指落点位置的X坐标startPoint（也就是距离屏幕左侧的距离），再获取到手指滑动后终点的X坐标stopPoint（抬起点距离屏幕左侧的距离），然后进行判断，如果两个点X坐标的距离相同即startPoint - stopPoint = 0，那么说明滑动的起点和终点X坐标距离左侧是相同https://blog.csdn.net/weixin_44296929/article/details/1085127512、指示器原文链接：elementui 走马灯指示器设置为圆点_day_z的博客-CSDN博客_element 走马灯指示器变成数字/deep/ .el-carousel__indicator--horizontal .el-carousel__button { width: 10px; height: 10px; background: transparent; border: 1px solid #ffffff; border-radius: 50%; opacity: 0.5; } /deep/ .el-carousel__indicator--horizontal...https://blog.csdn.net/day_z/article/details/122035233