Vue.js 图片轮播代码：实现流畅的图片滚动效果

<template>
  <div class='carousel'>
    <div class='carousel-container' :style="{ transform: `translateX(${x}px)` }">
      <div class='carousel-item' v-for='(item, index) in items' :key='index'>
        <img :src='item.image' alt=''>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { image: 'https://via.placeholder.com/150x150/FF0000/FFFFFF' },
        { image: 'https://via.placeholder.com/150x150/00FF00/FFFFFF' },
        { image: 'https://via.placeholder.com/150x150/0000FF/FFFFFF' },
        { image: 'https://via.placeholder.com/150x150/FFFF00/FFFFFF' },
        { image: 'https://via.placeholder.com/150x150/FF00FF/FFFFFF' }
      ],
      x: 0
    }
  },
  methods: {
    moveCarousel() {
      setInterval(() => {
        this.x -= 150
      }, 2000)
    }
  },
  mounted() {
    this.moveCarousel()
  }
}
</script>
<style>
.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  transition: transform 1s ease;
}

.carousel-item {
  flex: 0 0 150px;
  margin-right: 20px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>