vue3+antdesign Carousel 走马灯------自定义分页

   <template>
    <a-carousel arrows dots-class="slick-dots slick-thumb" autoplay effect="fade">
      <template #customPaging="props">
        <a>
          <img :src="require(`../assets/${getImgUrl(props.i)}.jpg`)" />
         
        </a>
      </template>
     
      <div v-for="item in 4" :key="item">
        <img :src="require(`../assets/${getImgUrl(item - 1)}.jpg`)" />
      </div>
    </a-carousel>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
  
  const baseUrl =
    '../assets/';
  export default defineComponent({
    setup() {
      const getImgUrl = (i: number) => {
        return `lb${i + 1}`;
        
        
      };
      console.log(getImgUrl(1));
      return {
        getImgUrl,
      };
    },
  });
  </script>
  <style scoped>
  /* For demo */
  .ant-carousel :deep(.slick-dots) {
    position: relative;
    height: auto;
  }
  .ant-carousel :deep(.slick-slide img) {
    border: 5px solid #fff;
    display: block;
    margin: auto;
    max-width: 80%;
  }
  .ant-carousel :deep(.slick-arrow) {
    display: none !important;
  }
  .ant-carousel :deep(.slick-thumb) {
    bottom: 0px;
  }
  .ant-carousel :deep(.slick-thumb li) {
    width: 60px;
    height: 45px;
  }
  .ant-carousel :deep(.slick-thumb li img) {
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    display: block;
  }
  .ant-carousel :deep .slick-thumb li.slick-active img {
    filter: grayscale(0%);
  }
  ::v-deep.ant-carousel[data-v-07a952a8] .slick-slide img{
    /* width: 100%;
    max-width: 100%; */
    height: 500px;
    border: 0px;
  }
  ::v-deep.ant-carousel{
    margin-top: 20px;
  }
  ::v-deep.ant-carousel[data-v-07a952a8] .slick-thumb{
    margin-top: 10px;
  }
  </style>