vue实现轮播图代码

这是一段简单的 Vue 实现轮播图的代码：

<template>
  <div>
    <div class="carousel">
      <transition-group name="slide" tag="ul">
        <li v-for="(item, index) in items" :key="index" :style="{ left: `${index * 100}%` }">
          {{ item }}
        </li>
      </transition-group>
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      currentIndex: 0
    };
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex + this.items.length - 1) % this.items.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    }
  }
};
</script>

<style>
.carousel {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

li {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  list-style: none;
}
</style>

这段代码实现了一个基本的轮播图，它使用了 Vue 中的 `transition` 组件实现动画效果，并通过控制 `currentIndex` 变量来实现图片切换。