给我一个轮播图代码vue

以下是一个基本的Vue轮播图代码：

<template>
  <div class="carousel">
    <div class="carousel-inner">
      <div v-for="(image, index) in images" :key="index" :class="{ active: index === currentIndex }">
        <img :src="image" alt="Slide">
      </div>
    </div>
    <a class="carousel-control-prev" @click="prevSlide">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" @click="nextSlide">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://via.placeholder.com/800x400/FF0000/FFFFFF",
        "https://via.placeholder.com/800x400/00FF00/FFFFFF",
        "https://via.placeholder.com/800x400/0000FF/FFFFFF",
      ],
      currentIndex: 0,
    };
  },
  methods: {
    prevSlide() {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        this.currentIndex = this.images.length - 1;
      }
    },
    nextSlide() {
      this.currentIndex++;
      if (this.currentIndex >= this.images.length) {
        this.currentIndex = 0;
      }
    },
  },
};
</script>

<style>
.carousel {
  position: relative;
  height: 400px;
}

.carousel-inner {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.carousel-inner > div {
  height: 100%;
}

.carousel-inner > div > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}

.carousel-control-prev {
  left: 1rem;
}

.carousel-control-next {
  right: 1rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
}
</style>

注释：

- `images` 数组包含轮播图中的所有图片链接。
- `currentIndex` 表示当前显示的图片的索引。
- `prevSlide` 和 `nextSlide` 方法分别用于切换到上一张和下一张图片。
- 轮播图的HTML结构由一个 `.carousel` 容器、一个 `.carousel-inner` 容器和多个 `.carousel-inner > div` 容器组成。
- `currentIndex` 变化时，通过绑定 `:class="{ active: index === currentIndex }"` 将当前图片容器的类名设置为 `active`，从而激活CSS中的样式。
- `.carousel-control-prev` 和 `.carousel-control-next` 用于显示左右箭头，通过 `@click` 绑定 `prevSlide` 和 `nextSlide` 方法来实现图片切换。箭头样式由 `.carousel-control-prev-icon` 和 `.carousel-control-next-icon` 定义。