Ant Design Vue a-carousel 走马灯自定义左右箭头切换图片

 

import {Carousel, Icon} from ‘antd‘;//引用组件 全局引用过可忽略

<div class="slide">
          <h1 @click="handlePrev">《</h1>
          <a-carousel arrows dots-class="slick-dots slick-thumb" ref="img">
            <a slot="customPaging" slot-scope="props">
              <img :src="getImgUrl(getAvatarView(props.i))" />
            </a>
            <div v-for="(item, index) in images" :key="index">
              <div>
                <img class="img" style="height: 50vh" :src="getAvatarView(item)" />
              </div>
            </div>
          </a-carousel>
          <h1 @click="handleNext">》</h1>
        </div>



 methods: {
    getImgUrl(i) {
      return this.images[i]
     },
    handlePrev() {
      // 通过上边指定的ref 来操作
      this.$refs.img.prev()
     },
    handleNext() {
      this.$refs.img.next()
     },
}

这里说明一下getAvatarView只是我拼接文件路径的方法，可以直接放文件路径