使用vue2编写一段前端轮播图代码

答案：

<template>
  <div id="app">
    <div class="carousel">
      <div class="slides">
        <div v-for="(slide,index) in slides" :key="index">
          <img :src="slide.img" alt="">
        </div>
      </div>
    </div>
  </div>
</template><script>
export default {
  name: 'carousel',
  data() {
    return {
      slides: [
        {img: 'slide-1.jpg'},
        {img: 'slide-2.jpg'},
        {img: 'slide-3.jpg'},
        {img: 'slide-4.jpg'},
      ]
    }
  }
}
</script><style>
.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.slides {
  width: 100%;
  overflow: hidden;
  position: relative;
  animation: carousel 15s linear infinite;
}
.slides > div {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: all 0.5s ease-in-out;
}
.slides > div:nth-child(1) {
  animation-delay: 0s;
  opacity: 1;
}
.slides > div:nth-child(2) {
  animation-delay: 5s;
}
.slides > div:nth-child(3) {
  animation-delay: 10s;
}
.slides > div:nth-child(4) {
  animation-delay: 15s;
}@keyframes carousel {
  0%, 25%, 100% {
    left: 0;
  }
  17%, 33% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  67%, 83% {
    left: -300%;
  }
}
</style>
``