Vue 实现轮播图功能

<template>
  <div class="carousel">
    <carousel v-model="currentIndex" :autoplay="true" :autoplay-speed="3000">
      <carousel-item v-for="(item, index) in items" :key="index">
        <img :src="item.image" alt="carousel-image">
      </carousel-item>
    </carousel>
    <div class="dots">
      <span v-for="(item, index) in items" :key="index" :class="{ dot: true, active: currentIndex === index }"></span>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      items: [
        { image: 'image1.jpg' },
        { image: 'image2.jpg' },
        { image: 'image3.jpg' }
      ]
    }
  }
}
</script>
 
<style scoped>
.carousel {
  position: relative;
}
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  display: inline-block;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dot.active {
  background-color: #333;
}
</style>

这个代码实例展示了如何在Vue中使用自定义的轮播图组件，包括图片列表和对应的小圆点指示器。carousel和carousel-item是假设存在的Vue组件，需要在实际使用时替换为实际的轮播图组件。currentIndex用于跟踪当前激活的图片索引，items数组包含轮播图中的图片数据。dots样式用于显示指示器，其中.active类用于突出显示当前激活的指示器。