vue3的轮播图代码，不要左右箭头，要下标

下面是一个 Vue 3 的轮播图组件示例，这个版本不包括左右箭头，而是使用数字下标来显示当前轮播图的索引。

<template>  
  <div class="carousel">  
    <div class="carousel-images" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">  
      <div  
        class="carousel-image"  
        v-for="(image, index) in images"  
        :key="index"  
        :style="{ backgroundImage: `url(${image})` }"  
      ></div>  
    </div>  
    <div class="carousel-indicator">  
      <span  
        v-for="(image, index) in images"  
        :key="index"  
        :class="{ active: currentIndex === index }"  
        @click="goToSlide(index)"  
      >  
        {{ index + 1 }}  
      </span>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      images: [  
        'https://example.com/image1.jpg',  
        'https://example.com/image2.jpg',  
        'https://example.com/image3.jpg',  
        // 更多图片地址...  
      ],  
      currentIndex: 0,  
    };  
  },  
  methods: {  
    goToSlide(index) {  
      this.currentIndex = index;  
    },  
  },  
};  
</script>  
  
<style scoped>  
.carousel {  
  position: relative;  
  width: 100%;  
  overflow: hidden;  
}  
  
.carousel-images {  
  display: flex;  
  transition: transform 0.5s ease;  
}  
  
.carousel-image {  
  flex: 0 0 100%;  
  background-size: cover;  
  background-position: center;  
}  
  
.carousel-indicator {  
  position: absolute;  
  bottom: 10px;  
  left: 50%;  
  transform: translateX(-50%);  
  display: flex;  
  justify-content: center;  
}  
  
.carousel-indicator span {  
  margin: 0 5px;  
  cursor: pointer;  
  color: white;  
  background-color: rgba(0, 0, 0, 0.5);  
  padding: 5px 10px;  
  border-radius: 5px;  
}  
  
.carousel-indicator span.active {  
  background-color: red;  
}  
</style>