用vue写个轮播图

以下是一个基本的Vue轮播图组件：

<template>
  <div class="carousel">
    <div class="carousel-inner">
      <div v-for="(slide, index) in slides" :key="index" :class="['carousel-item', {active: index === currentIndex}]">
        <img :src="slide.image" class="d-block w-100" alt="slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{slide.title}}</h5>
          <p>{{slide.description}}</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#" role="button" @click.prevent="prevSlide">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#" role="button" @click.prevent="nextSlide">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  props: {
    slides: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    prevSlide () {
      this.currentIndex = (this.currentIndex === 0) ? this.slides.length - 1 : this.currentIndex - 1
    },
    nextSlide () {
      this.currentIndex = (this.currentIndex === this.slides.length - 1) ? 0 : this.currentIndex + 1
    }
  }
}
</script>

<style>
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  height: 500px;
}

.carousel-item.active {
  display: block;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.6);
}

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

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

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

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M5.5 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
</style>

在父组件中使用该轮播图组件：

<template>
  <div class="container">
    <h1>Vue Carousel</h1>
    <carousel :slides="slides"></carousel>
  </div>
</template>

<script>
import Carousel from './Carousel.vue'

export default {
  name: 'App',
  components: {
    Carousel
  },
  data () {
    return {
      slides: [
        {
          image: 'https://picsum.photos/id/1/1200/500',
          title: 'Slide 1',
          description: 'This is the first slide'
        },
        {
          image: 'https://picsum.photos/id/2/1200/500',
          title: 'Slide 2',
          description: 'This is the second slide'
        },
        {
          image: 'https://picsum.photos/id/3/1200/500',
          title: 'Slide 3',
          description: 'This is the third slide'
        }
      ]
    }
  }
}
</script>