<a-carousel arrows>
        <a slot="customPaging" slot-scope="props">
          <img :src="templateList[props.i].dot" alt="" />
        </a>
        <div
          slot="prevArrow"
          slot-scope="props"
          :style="{ left: '10px', zIndex: '1' }"
        >
          <a-icon type="left-circle" />
        </div>
        <div
          slot="nextArrow"
          slot-scope="props"
          style="right: 10px"
        >
          <a-icon type="right-circle" />
        </div>
        <div v-for="(item, index) in templateList" :key="index">
          <img :src="item.imgurl" alt="" />
        </div>
      </a-carousel>

templateList为数据源数组,包含imgurl和dot等信息。比如:

[
  {
    index: '1',
    imgurl: require("@/assets/img/disk1.jpg"),
    name:'xxx',
    dot:require("@/assets/img/dot1.png")
  },
  ...
]

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐