vue carousel 自定义箭头 点击事件 点击可以左右切换

<div class="bannerMain">
  <div class="left">
    <img @click="arrowClick('left')" src="../../../assets/passage/icon_yjt.png" alt="">
  </div>
  <el-carousel  ref="cardShow" indicator-position="none" arrow="never" class="carousel">
    <el-carousel-item class="carousel2" v-for="item in 4" :key="item">
      <img class="bannerImg" src="../../../assets/passage/banner.png" alt="">
    </el-carousel-item>
  </el-carousel>
  <div class="right">
    <img @click="arrowClick('right')" src="../../../assets/passage/icon_zjt.png" alt="">
  </div>
</div>

arrowClick (val) {
  if (val === 'right') {
    this.$refs.cardShow.next()
  } else {
    this.$refs.cardShow.prev()
  }
},

.bannerMain {
    background: url("../../../assets/passage/bannerbg.png") no-repeat;
    background-size: 100% 100%;
    width: calc(100% - 90px);
    margin: 0 auto;
    height: calc(100% - 100px);
    position: relative;

    .left {
      position: absolute;
      left: -30px;
      top: 50%;
      margin-top: -35px;

      img {
        width: 57px;
        height: 71px;
        cursor: pointer;
      }
    }

    .bannerImg {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .carousel {
      width: 100%;
      height: 100%;
      position: relative;

    }

    ::v-deep {
      .el-carousel__container {
        position: relative;
        overflow: hidden;
        height: calc(100% - 90px);
        width: calc(100% - 72px);
        margin: 0 auto;
        margin-top: 5%;
      }
    }

    .carousel2 {
      width: 100%;
      height: 100%;
    }

    .right {
      position: absolute;
      right: -30px;
      top: 50%;
      margin-top: -35px;

      img {
        width: 57px;
        height: 71px;
        cursor: pointer;
      }
    }
  }

数据大屏演示效果

数据大屏演示效果