Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

当数据只有两项时复制一遍数据，比如1，2 ==>1，2，1，2
自定义指示器，在只有两项时显示自定义的指示器，同时，监听自定义指示器的点击事件，切换幻灯片的索引
同时监听幻灯片的change事件，用以控制自定义指示器的选中样式
代码可以直接复用 css html js 都有文章来源地址https://www.toymoban.com/news/detail-610404.html


    <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>