如何做一个无限循环？（滑块javascript）

我的滑块包含X张幻灯片（示例中有4张）。我希望同时放映3张幻灯片，并在结束时回到开头。
例如：

• 1 2 3
• 2 3 4
• 3 4 1
• 4 1 2
• 1 2 3

有人能帮我正确地循环滑块吗？
我尝试了

如果是this.slide[this.nbr单击+2]！=未定义，但有很多条件


类滑块{
构造函数（）{
this.slide=document.getElementsByClassName（“幻灯片”）；
this.next=document.getElementById（“next”）；
this.nbr=this.slide.length；
此参数=0；
}
单击（）{
this.next.addEventListener（“单击”，（）=>{
这个.点击++；
如果（this.nbr单击>this.nbr）{
此参数=1；
}
for（设i=0；i
#滑块{
位置：相对位置；
高度：200px；
显示器：flex；
}
.幻灯片{
高度：200px；
宽度：200px；
位置：绝对位置；
边框：1px纯黑；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.左{
转换：translateX（0px）；
}
.中心{
转换：translateX（200px）；
}
.对{
转换：translateX（400px）；
}
.隐藏{
显示：无；
}

1.
2.
3.
4.
接下来
您可以使用和给定幻灯片长度获取剩余的值

this.slide[this.nbrClick % this.nbr].classList = "slide left";
this.slide[(this.nbrClick + 1) % this.nbr].classList = "slide center";
this.slide[(this.nbrClick + 2) % this.nbr].classList = "slide right";

余数运算符返回一个操作数除以第二个操作数时剩余的余数。它总是带有股息的标志

例如，如果取10并希望余数值为3，则结果为1

10 - Math.floor(10 / 3) * 3 = 1

或者更实用一点的代码值：

0 % 3 = 0
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2


类滑块{
构造函数（）{
this.slide=document.getElementsByClassName（“幻灯片”）；
this.next=document.getElementById（“next”）；
this.nbr=this.slide.length；
此参数=0；
}
单击（）{
this.next.addEventListener（“单击”，（）=>{
这个.点击++；
如果（this.nbr单击>this.nbr）{
此参数=1；
}
for（设i=0；i
#滑块{位置：相对；高度：200px；显示：flex；}
.slide{高度：200px；宽度：200px；位置：绝对；边框：1px纯黑色；显示：柔性；对齐内容：中心；对齐项目：中心；}
.left{transform:translateX（0px）；}
.center{transform:translateX（200px）；}
.right{transform:translateX（400px）；}
.hidden{display:none；}

1.
2.
3.
4.
接下来
您可能需要对DOM重新排序，并且您可能还需要在滑动动画期间添加额外的幻灯片。这个问题的主题行很有挑衅性。您能给我解释一下模吗？