Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常_ar

当走马灯只有两项时，第一次切换时动画效果是右滑，第二次切换时变成了左滑
就变成了左右左右来回切换而不是一个方向无限循环
解决办法

当数据只有两项时复制一遍数据，比如1，2 ==>1，2，1，2
自定义指示器，在只有两项时显示自定义的指示器，同时，监听自定义指示器的点击事件，切换幻灯片的索引
同时监听幻灯片的change事件，用以控制自定义指示器的选中样式
代码可以直接复用 css html js 都有


    <div class="banner" :class="imgstatus ? 'looptwoimg' : 'looponeimg'">
      <el-carousel
        height="600px"
        width="100%"
        trigger="click"
        indicatorposition="none"
        arrow="true"
        indicator-position
        @change="carouselchange"
      >
        <el-carousel-item v-for="(item, index) in bannerdata" :key="index">
          <div
            class="slide-img"
            @click="linkaddress(item.addressurl)"
            :style="item.addressurl ? { cursor: 'pointer' } : {}"
          >
            <img
              alt
              :style="item.addressurl ? { cursor: 'pointer' } : {}"
              :src="
                item.imgeurl
                  ? url + '/api/eipe/download?id=' + item.imgeurl
                  : item
              "
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
data() {
    return {
      imgstatus: false,
      bannerdata: [],
      url: process.env.vue_app_banner_url,
    }
  },
  methods: {
    carouselchange(data) {
      if (data == 0 || data == 1) {
        //当为第一组数据的时候，打开当前的指示器，隐藏第二组数据的指示器
        this.imgstatus = true
      } else {
        //当为第二组数据的时候，打开当前的指示器，隐藏第一组数据的指示器
        this.imgstatus = false
      }
    },
    linkaddress(linkaddress) {
      if (linkaddress) {
        window.open(linkaddress)
      }
    },
    async geteipeimgelist() {
      let data = await this.$api.hall.geteipeimgelist()
      if (data.length === 2) {
        this.imgstatus = true
        //将2条数据复制一份为4条数据
        this.bannerdata = data.concat(data)
      } else {
        this.imgstatus = false
        //其他时候正常赋值
        this.bannerdata = data
      }
    },
   }
   <style scoped lang="less">
	/deep/ .looponeimg {
	  .el-carousel__indicators {
	    & > li:nth-child(1),
	    & > li:nth-child(2) {
	      display: none;
	    }
	  }
	}
	
	/deep/ .looptwoimg {
	  .el-carousel__indicators {
	    & > li:nth-child(3),
	    & > li:nth-child(4) {
	      display: none;
	    }
	  }
	}
</style>