Vue 一次显示多个图片轮播

你可以使用Vue的v-for指令来遍历一个图片列表，并使用CSS来实现图片的轮播效果。

以下是一个简单的示例代码：

HTML:

<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>
    <button class="carousel-control-prev" @click="prevSlide">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" @click="nextSlide">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
</template>

CSS:

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.carousel-inner > div {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
.carousel-inner > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  outline: none;
  cursor: pointer;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.carousel-control-prev-icon {
  background-image: url('path/to/prev-icon.svg');
}
.carousel-control-next-icon {
  background-image: url('path/to/next-icon.svg');
}
.carousel-control-prev {
  left: 20px;
}
.carousel-control-next {
  right: 20px;
}
.carousel-inner > .active {
  z-index: 1;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.carousel-inner > .next {
  transform: translateX(100%);
}
.carousel-inner > .prev {
  transform: translateX(-100%);
}

JavaScript:

<script>
export default {
  data() {
    return {
      images: [
        'path/to/image-1.jpg',
        'path/to/image-2.jpg',
        'path/to/image-3.jpg',
        'path/to/image-4.jpg',
        'path/to/image-5.jpg'
      ],
      currentIndex: 0
    }
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prevSlide() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    }
  }
}
</script>

这个示例中，我们使用了一个包含多个图片路径的数组来显示轮播图片。使用v-for指令遍历这个数组，并使用:class绑定一个active类来标记当前显示的图片。

我们还使用了两个按钮来切换轮播图片，当点击按钮时，我们会更新currentIndex来显示下一张或上一张图片。

最后，我们使用CSS来设置图片轮播的样式，包括图片的大小、轮播效果、按钮样式等。