Vue 图片轮播：5 张图片从左往右滚动，实现图片滑动效果

Vue 图片轮播：5 张图片从左往右滚动

本示例展示如何使用 Vue、CSS 和 JavaScript 创建一个简单的图片轮播，实现 5 张图片从左往右滚动，并且可以同时看见好几个图片。

HTML 代码

<div class='slider'>
  <div class='slider-content'>
    <img src='https://picsum.photos/id/237/200/300' alt='image1'>
    <img src='https://picsum.photos/id/238/200/300' alt='image2'>
    <img src='https://picsum.photos/id/239/200/300' alt='image3'>
    <img src='https://picsum.photos/id/240/200/300' alt='image4'>
    <img src='https://picsum.photos/id/241/200/300' alt='image5'>
  </div>
</div>

CSS 代码

.slider {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.slider-content {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.5s ease;
}

.slider-content img {
  margin-right: 10px;
}

JavaScript 代码

new Vue({
  el: '#app',
  mounted() {
    setInterval(() => {
      const sliderContent = document.querySelector('.slider-content');
      const firstImg = sliderContent.children[0];
      sliderContent.appendChild(firstImg);
    }, 3000);
  }
})

在 Vue 的 mounted 钩子函数中，我们使用了 setInterval 来实现每 3 秒钟将第一张图片移到最后一张。这样就实现了 5 个图片从左往右滚动的效果，并且可以同时看见好几个图片。