在浏览1688时发现商品详情页有个小的多图轮播，下面记录一下实现过程。

在实现的时候要先想好自己的需求，即需要同时展示多少个图片
这里以1688为例，一行就展示7个。

1.首先声明一个下标，用于记录位置.
const index = ref(0);

2.移动事件
const move = () =>{
    //这里的content代表着可视区域总宽度，非所有图片加起来的宽度
    //66是一个图片的宽度
    content.style.left = -66 * index.value + 'px';
}

3.下一张事件
const rightBTN = () =>{
  //图片数组的length为16
  if (index.value <= props.imgList.length - 8) {
    index.value++;
  }
  move();
}

4.上一张
const leftBTN = () => {
  //只要index的值大于0就说明不是第一张，就可以继续上一张
  if (index.value > 0) {
    index.value--;
  }
  move();
}

多图轮播图

终