图像轮播翻译计算

Question

我正在尝试创建一个图像轮播，但我在计算正确的翻译值方面遇到了麻烦。

基本上我想要的是，如果当前图像不是第一张或最后一张，它应该看起来与第二张幻灯片完全相同（居中并且包含上一张和下一张幻灯片的部分）。如果当前幻灯片是第一张图片，它应该显示右侧下一张幻灯片的一部分（这是有效的）。最后，如果当前幻灯片是最后一张，它应该显示上一张幻灯片的一部分，与第一张幻灯片完全相同，但在左侧。

翻译价值中有一些我缺少的东西，但我无法弄清楚是什么。或者是否有更好的方法来实现这一目标？

const slides = document.querySelectorAll('.slide');
const slider = document.querySelector('.slides');
const transitionBy = 85;
var currSlide = 0;

setInterval(function() {     
 if (currSlide > slides.length - 1) {
    currSlide = 0;
  } else {
    slider.style.transform = `translate(-${transitionBy * currSlide}%)`;
  currSlide++;
  }
}, 1500);

代码可以在这里找到：

https://jsfiddle.net/0e98d2mz/3/