vue3实现左右照片无缝滚动轮播图

Vue.js 3可以使用transition组件和v-for指令来实现左右照片无缝滚动轮播图。首先，你需要设置一个容器元素来包裹照片，并设置它的宽度为照片的宽度的n倍，其中n为照片的数量。然后，使用v-for指令在容器中循环渲染照片。接下来，使用transition组件和transform属性来实现左右滚动效果。最后，使用setInterval函数来实现自动切换照片的功能。

代码示例如下：

<template>
  <div class="carousel-container">
    <transition-group name="carousel-slide" tag="div">
      <div v-for="(photo, index) in photos" :key="index" class="carousel-slide-item">
        <img :src="photo" alt="photo" />
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [
        "photo1.jpg",
        "photo2.jpg",
        "photo3.jpg",
        // 添加更多照片
      ],
      currentIndex: 0,
      intervalId: null,
    };
  },
  mounted() {
    this.startAutoSlide();
  },
  beforeUnmount() {
    this.stopAutoSlide();
  },
  methods: {
    startAutoSlide() {
      this.intervalId = setInterval(() => {
        this.slideRight();
      }, 3000);
    },
    stopAutoSlide() {
      clearInterval(this.intervalId);
    },
    slideLeft() {
      this.currentIndex = (this.currentIndex - 1 + this.photos.length) % this.photos.length;
    },
    slideRight() {
      this.currentIndex = (this.currentIndex + 1) % this.photos.length;
    },
  },
};
</script>

<style>
.carousel-container {
  width: 100%;
  overflow: hidden;
}

.carousel-slide-item {
  float: left;
  width: 100%;
}

.carousel-slide-enter-active,
.carousel-slide-leave-active {
  transition: transform 0.5s;
}

.carousel-slide-enter,
.carousel-slide-leave-to {
  transform: translateX(100%);
}
</style>