vue carousel

<template>
  <div class="carousel">
    <transition-group name="fade" tag="div">
      <div v-for="(slide, index) in slides" :key="index" v-show="index === currentIndex" class="carousel__slide">
        <img :src="slide.image" alt="carousel image" />
      </div>
    </transition-group>
    <button @click="prevSlide">Previous</button>
    <button @click="nextSlide">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        { image: 'https://via.placeholder.com/800x400?text=Slide+1' },
        { image: 'https://via.placeholder.com/800x400?text=Slide+2' },
        { image: 'https://via.placeholder.com/800x400?text=Slide+3' }
      ],
      currentIndex: 0
    };
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    },
    prevSlide() {
      this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    }
  }
};
</script>

<style scoped>
.carousel {
  position: relative;
  width: 800px;
  margin: 0 auto;
}
.carousel__slide {
  text-align: center;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 transition-group 组件来实现图片切换时的淡入淡出效果。
   • v-for 指令用于遍历 slides 数组，并显示当前索引对应的图片。
   • v-show 指令根据 currentIndex 控制显示哪一张图片。
   • 提供了两个按钮，分别用于切换到上一张和下一张图片。

2. 脚本部分 (<script>):

   • 定义了一个包含三张图片的 slides 数组，每张图片通过 image 属性指定其 URL。
   • currentIndex 用于跟踪当前显示的图片索引。
   • nextSlide 和 prevSlide 方法用于更新 currentIndex，从而切换图片。

3. 样式部分 (<style scoped>):

   • 定义了一些基本的样式，确保轮播图居中显示，并设置了淡入淡出的过渡效果。