Vue.js 图片轮播：5 张图片从左往右滚动代码示例

.slider-container {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 300px;
}

.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  transition: all 0.5s ease;
}

.slider-item {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

new Vue({
  el: '#app',
  data() {
    return {
      images: [
        'https://picsum.photos/500/300?random=1',
        'https://picsum.photos/500/300?random=2',
        'https://picsum.photos/500/300?random=3',
        'https://picsum.photos/500/300?random=4',
        'https://picsum.photos/500/300?random=5'
      ],
      currentIndex: 0,
      sliderWidth: 0,
      itemWidth: 0,
      sliderStyle: {}
    }
  },
  mounted() {
    this.sliderWidth = this.$refs.sliderContainer.offsetWidth
    this.itemWidth = this.$refs.sliderItem.offsetWidth
    this.autoPlay()
  },
  methods: {
    autoPlay() {
      setInterval(() => {
        this.currentIndex++
        if (this.currentIndex > this.images.length - 1) {
          this.currentIndex = 0
        }
        this.setSliderStyle()
      }, 2000)
    },
    setSliderStyle() {
      this.sliderStyle = {
        transform: `translateX(-${this.currentIndex * this.itemWidth}px)`
      }
    }
  }
})