引用组件import {Carousel, Icon} from ‘antd’;

<div class="modal_box">
    <!-- 上一页的图标 -->
    <a-icon type="left" style="font-size: 50px" @click="handlePrev" />
        <!-- 走马灯 -->
        <!-- 一定要注意这里指定的 ref -->
        <a-carousel autoplay ref="img">
            <div><h2>1</h2></div>
            <div><h2>2</h2></div>
            <div><h2>3</h2></div>
            <div><h2>4</h2></div>
        </a-carousel>
    <!-- 下一页图标 -->
    <a-icon
    type="right"
    style="font-size: 50px"
    @click="handleNext"
    />
</div>

方法调用

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

样式,一定要给轮播图一个宽度,否则轮播图的宽度溢出,无法使组件保持水平

.modal_box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.ant-carousel {
  width: 75%;
}

效果图如下(有些潦草)

有懂得大佬讲讲官方文档写的走马灯自定义箭头怎么用,实在弄不明白

Logo

前往低代码交流专区

更多推荐