vue中使用element走马灯实现自定义按钮

 第一：

不需要自动轮播  :autoplay="false"，

不需要自带箭头  arrow="never"

第二：

require('./img/1.png'),为数组方式在轮播图区域吧图片遍历生成

使用定位把按钮图片定位过去

第三：

使用ref进行调用走马灯自带方法进行图片切换

第四：

上代码，基本把图片一换就能用了 

<template>
  <div class="textOverView">
    <div class="leftArrow">
      <img src="./img/left.png" @click="arrowClick('left')" />
    </div>
    <el-carousel
      arrow="never"
      ref="cardShow"
      :autoplay="false"
      indicator-position="outside"
      height="830px"
    >
      <el-carousel-item v-for="(i, idx) in date" :key="idx">
        <img :src="i" class="wid" alt="" />
      </el-carousel-item>
    </el-carousel>

    <div class="rightArrow">
      <img src="./img/right.png" @click="arrowClick('right')" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextOverView',
  props: {},
  components: {},
  data() {
    return {
      date: [
        require('./img/1.png'),
        require('./img/2.png'),
        require('./img/3.png'),
        require('./img/4.png'),
        require('./img/5.png'),
        require('./img/6.png'),
        require('./img/7.png'),
        require('./img/8.png')
      ]
    }
  },
  methods: {
    arrowClick(val) {
      if (val === 'right') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
    }
  },
  mounted() {}
}
</script>

<style scoped lang="scss">
.textOverView {
  position: relative;
  .leftArrow {
    position: absolute;
    width: 88px;
    height: 88px;
    top: 45%;
    left: 20px;
    z-index: 999;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightArrow {
    position: absolute;
    width: 88px;
    height: 88px;
    right: 20px;
    top: 45%;
    z-index: 999;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .wid {
    width: 1440px;
    height: 838px;
  }
}
</style>