Vue.js 图片轮播：实现 5 张图片从左到右滚动

<div id='app'>
  <div class='slider'>
    <div class='slider-container' ref='sliderContainer'>
      <div class='slider-item'>
        <img src='https://picsum.photos/id/1018/500/300' alt='image1'>
      </div>
      <div class='slider-item'>
        <img src='https://picsum.photos/id/1015/500/300' alt='image2'>
      </div>
      <div class='slider-item'>
        <img src='https://picsum.photos/id/1019/500/300' alt='image3'>
      </div>
      <div class='slider-item'>
        <img src='https://picsum.photos/id/1022/500/300' alt='image4'>
      </div>
      <div class='slider-item'>
        <img src='https://picsum.photos/id/103/500/300' alt='image5'>
      </div>
    </div>
  </div>
</div>
<style>
.slider {
  overflow: hidden;
  width: 500px;
  height: 300px;
}

.slider-container {
  display: flex;
  width: 2500px;
  animation: slider 20s linear infinite;
}

.slider-item {
  flex-shrink: 0;
  width: 500px;
  height: 300px;
}

@keyframes slider {
  from { transform: translateX(0); }
  to { transform: translateX(-2000px); }
}
</style>
<script>
new Vue({
  el: '#app',
  mounted() {
    this.$refs.sliderContainer.style.animationDuration = `${this.duration}s`;
  },
  data() {
    return {
      duration: 20
    };
  }
});
</script>
<h2>代码解析</h2>
<ol>
<li>使用 <code>overflow: hidden</code> 隐藏超出父容器的部分，使得只能看到一个图片；</li>
<li>使用 <code>display: flex</code> 和 <code>flex-shrink: 0</code> 将图片容器排列在一行，不缩小；</li>
<li>使用 <code>animation</code> 属性定义动画，将图片容器从左往右滚动；</li>
<li>使用 <code>@keyframes</code> 定义动画的关键帧；</li>
<li>使用 <code>mounted</code> 钩子函数获取图片容器的引用，设置动画时长；</li>
<li>使用 <code>data</code> 属性定义动画时长，可根据需求自行更改。</li>
</ol>