我想用javascript制作一个无限轮播。当元素离开屏幕时，我会克隆它们并将它们粘贴到列表的末尾。但一分钟后，HTML 布局中就会出现很多克隆元素。我决定在克隆后删除这个元素。但我得到了所有元素的即时偏移。如何避免呢？或者也许还有另一种算法来实现这个无尽的轮播？
这是代码https://codepen.io/alessandro-kex/pen/abGWNEK
window.addEventListener("load", function () {
const slideContainer = document.querySelector(".carousel");
const slidesWrapper = document.querySelector(".carousel-slides");
let slides = document.querySelectorAll(".carousel-slide");
let index = 0;
const interval = 1500;
let moveDistance = 0;
const paddingRight = 50;
let lastSlideIndex = slides.length - 1;
let firstClone;
const startSlide = (index) => {
this.setInterval(() => {
moveDistance = moveDistance + slides[index].clientWidth + paddingRight;
slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
slidesWrapper.style.transition = "1s";
firstClone = slides[index].cloneNode(true);
firstClone.id = `first-clone-${index}`;
slidesWrapper.append(firstClone);
/*If uncomment it - then the problem …