创建'；无限'；javascript jquery的幻灯片效果

我试图创建一个无限幻灯片，并尝试了无数次通过移动容器使其无限。您可以看到转换正在工作，但问题是当您到达终点时，您可以看到它回到起点。有人能建议如何创造无限的效果吗

如果人们喜欢这样做，或者参见下面的代码：

$（文档）.ready（函数（）{
常数numSlides=6；
设指数=0；
$（'.next arrow'）。单击（函数（）{
常量slideWidth=$（'.card'）.outerWidth（true）；
指数+=1；
如果（索引===numSlides）{
指数=0；
}
$（'.card'）.css（'transform'，'translateX（-${slideWidth*index}px）`）
});
$（'.prev arrow'）。单击（函数（）{
常量slideWidth=$（'.card'）.outerWidth（true）；
指数-=1；
如果（指数<0）{
指数=numSlides-1；
}
$（'.card'）.css（'transform'，'translateX（-${slideWidth*index}px）`）；
});
});
.slideshow包装器{
宽度：250px；
显示器：flex；
证明内容：之间的空间；
柔性包装：nowrap；
弯曲方向：行；
}
.卡片{
弹性：10100%；
利润率：0.5px；
高度：100px；
宽度：300px；
转变：转变0.5s；
}
.一{
背景：红色；
}
.二{
背景：蓝色；
}
.三{
背景：黄色；
}
.4{
背景：橙色；
}
.5{
背景：粉红色；
}
.6{
背景：绿色；
}

上
NEXT
我使用flexbox的order属性为“NEXT”按钮创建了代码。我认为代码本身就说明了问题，但我在其中添加了一些注释

我相信您将能够自己了解“previous”按钮的功能；）


$（文档）.ready（函数（）{
$（'.next arrow'）。单击（函数（）{
常量slideWidth=$（'.card'）.outerWidth（true）；
常量动画=（滑动宽度）*-1+“px”；
$（'.slideshow包装器'）
.animate（{'marginLeft'：anim}，500，function（）{
/*动画准备就绪后，重新组织元素的顺序*/
$（“.card”）。每个（函数（索引，元素）{
const currentOrder=$（元素）.css（“顺序”）；
设newOrder=currentOrder-1；
if（newOrder==0）{
新秩序=6；
/*移动第一个项目时，重置边距*/
$（'.slideshow wrapper'）.css（“左边距”，“0px”）；
}
$（element.css（“order”，newOrder）；
});
});
});
$（'.prev arrow'）。单击（函数（）{
常量slideWidth=$（'.card'）.outerWidth（true）；
});
});
.slideshow包装器{
显示器：flex；
}
.卡片{
弹性：10100%；
利润率：0.5px；
高度：100px；
最大宽度：300px；
}
.一{
背景：红色；
顺序：1；
}
.二{
背景：蓝色；
顺序：2；
}
.三{
背景：黄色；
顺序：3；
}
.4{
背景：橙色；
顺序：4；
}
.5{
背景：粉红色；
顺序：5；
}
.6{
背景：绿色；
顺序：6；
}

上
接下来，每次将第一张
.card
移动到末尾，创建一个无限幻灯片。这可以通过替换整个
来显示。下一个箭头
单击处理程序，仅使用
var wrapper=$（“.slideshow wrapper”）；查找（“.card:first”）.appendTo（包装器）但是，这会删除动画。因此，我没有将此添加为答案，因为我认为这对于您的最终需求来说是不完整的（但您可能可以在此基础上进行扩展以添加动画（我的解决方案非常不确定）），谢谢@freedomn-m，但我需要保留动画。好吧，更多的是关于您/某人将动画添加到“移动.卡到底”而不是“保留”现有动画。