Javascript 如何使我的图像旋转木马循环而不是返回

我目前正在处理一个图像传送带，我遇到了一个问题。我的滑块的自动功能不能像我希望的那样工作。当滑块到达最后一个图像时，它会一直返回到第一个图像，显示两个图像之间的图像，而不是循环返回到第一个图像。我可以在代码中添加什么来实现这一点？这是相关代码

HTML:

---

提前谢谢

解决方案：

在HTML中的firstClone之后添加twoClone

在“最后一步”之后立即→ firstClone”，关闭动画并跳到幻灯片“first”。之后，打开动画并转到正常的旋转木马

HTML:

JavaScript:

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');


const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

var interval = 3000; // 1000 = 1 sec
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselImages[counter].id === 'firstClone';
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


    if (offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);

const carouselSlide=document.querySelector（“.carousel slide”）；
const carouselImages=document.queryselectoral（“.carousel幻灯片img”）；
const prevBtn=document.querySelector（#prevBtn”）；
const nextBtn=document.querySelector（“nextBtn”）；
设计数器=1；
设durationAnimation=400；//太太
让activeAnimation=“transform”+durationAnimation+“ms ease in out”；
const size=carouselImages[0]。客户端宽度；
常量updateSlideTransformX=（）=>{
carouselSlide.style.transform=“translateX”（+-size*计数器+“px）”；
};
const changeActiveAnimation=off=>{
carouselSlide.style.transition=off==false？”：动态动画；
};
updateSlideTransformX（）；
设间隔=1000；//1000*3秒
setInterval（函数（）{
//启用动画
如果（计数器===1）changeActiveAnimation（）
//转到下一张幻灯片
计数器++；
updateSlideTransformX（）；
如果（计数器>=carouselImages.length-2）{
计数器=1；
设置超时（（）=>{
//禁用动画并跳到幻灯片1
changeActiveAnimation（假）；
updateSlideTransformX（）；
}，持续时间（动画）；
}
}，间隔）；

́

---

附加解决方案-来回传送带。

---

.

你能提供一个有效的演示让我们看到问题吗？@ibrahimmahrir我真的很抱歉。我对堆栈溢出非常陌生。请你详细说明你所说的工作演示是什么意思？很抱歉对于原始代码。改进的解决方案和在线沙盒和演示。

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');


const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

var interval = 3000; // 1000 = 1 sec
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselImages[counter].id === 'firstClone';
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


    if (offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);