带控件的无限幻灯片

Question

我一直在重建template，只是为了使我的开发技能达到同等水平并帮助学习JS。我正在尝试将幻灯片演示复制到主页底部，但似乎无法弄清楚他们是如何做到的。

我分两个阶段接受了挑战。在第一阶段，我用CSS动画制作了一个自动无限幻灯片。我现在正在尝试进行第二阶段。在前面有人的帮助下，我可以进行幻灯片演示，但是一旦到达终点，它就会停止。通过打开代码检查器，我可以看到它们，如以下所示，它们是CSS transform3D：但是我找不到能够使X坐标到达终点的JS切换到起点的JS。我确实看到了缩小的JS，但无法阅读，并且看到了不知道如何转换的jQuery。

这是我的Github link和相关的摘要。我们非常感谢您的帮助。我一直在努力研究这个问题，只是试图通过构建实际的未来请求来改进JS。

不仅要花时间阅读所有这些内容，还想帮助我变得更好。

let customers = document.getElementsByClassName('customer');
let count = customers.length;
let active = 0;
let width = customers[0].clientWidth;
let leftArrow = document.getElementById('left');
let rightArrow = document.getElementById('right');


let moveRight = () => {
  if (active < count - 1) active++;
  document.getElementById('customers')
    .style.transform = `translate(-${active*width}px)`;
}
let moveLeft = () => {
  if (active > 0) active--;
  document.getElementById('customers')
    .style.transform = `translate(-${active*width}px)`;
}

rightArrow.addEventListener('click', moveRight);
leftArrow.addEventListener('click', moveLeft);

.testimony_inner #customers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

<section class="testimony">


  <h2>Satisfied customers</h2>
  <div class="testimony_inner">
    <div class="arrow" id="left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.094 2.814l9.092 9.186-9.092 9.186-1.244-1.207 7.979-7.979-7.979-7.979 1.244-1.207zm.028-2.814l-4.122 4 8 8-8 8 4.122 4 11.878-12-11.878-12z"/></svg></div>
    <div class="arrow" id="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.094 2.814l9.092 9.186-9.092 9.186-1.244-1.207 7.979-7.979-7.979-7.979 1.244-1.207zm.028-2.814l-4.122 4 8 8-8 8 4.122 4 11.878-12-11.878-12z"/></svg></div>
    <div id="customers">
      <div class="customer" id="one">
        <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="">
        <h3>I just love Miller's. </h3>
        <p>His produce and staff are quality and his prices are reasonable. I'd recommend his store over anyone else's.</p>
        <p>shandra hynes</p>
      </div>
      <div class="customer" id="two">
        <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
        <h3>a worthy investment. </h3>
        <p>I feel very comfortable investing my hard-earned money in Mr. Millers store. His products, store environment, and customer service make it all worth while.</p>
        <p>kevin moorehead</p>
      </div>
      <div class="customer" id="three">
        <img src=https://randomuser.me/api/portraits/men/74.jpg alt="">
        <h3>Healthy living all around</h3>
        <p>Not only are his products good for you, so is his knowledge and personality. If you catch him on the floor he is willing to educate you about the benefits your body will enjoy from your food purchase.</p>
        <p>larry singleton</p>
      </div>
      <div class="customer" id="four">
        <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="">
        <h3>why shop elsewhere?</h3>
        <p>Want fresh food? He's got it. Don't feel like cooking but still want a healthy meal? He's got that too. On the go and want a quick but healthy quick bite or drink? Yep! He's serving up that too. It's all here and with a smile as the cherry on
          top. </p>
        <p>tiffany white</p>
      </div>
      <div class="customer" id="five">
        <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="">
        <h3>I just love Miller's. </h3>
        <p>His produce and staff are quality and his prices are reasonable. I'd recommend his store over anyone else's.</p>
        <p>shandra hynes</p>
      </div>

    </div>
  </div>

</section>