Создание бесконечного цикла карусели с использованием встроенного JavaScript, CSS и HTML. ⇐ CSS

[Гость]

Я пытаюсь создать бесконечную карусель, но у меня проблема с кнопкой «Назад»: когда я клонирую карточки из позиции 1 в карточку 5, она делает это, но показывает карточку в позиции 1 перед клонированием 5. Как можно Исправить эту проблему?
Когда вы дойдете до карты в позиции 1, немедленно клонируйте карту в позиции 5 и так далее, чтобы увидеть, что это бесконечный цикл. Здесь не скользящий прыжок, а последовательный. Я хочу это с собственным JavaScript. Подскажите, где моя ошибка и как ее исправить? Текущий код является полуфункциональным из-за упомянутой мной проблемы, он должен работать так.

Код: Выделить всё

let indice = 0;
let autoPlay;
const carusel = document.querySelector('.carusel');
const tarjetas = Array.from(carusel.children);
const btnAtras = document.querySelector('.btn-atras');
const contador = document.querySelector('.contador');

tarjetas.forEach(tarjeta => {
carusel.append(tarjeta.cloneNode(true));
carusel.prepend(tarjeta.cloneNode(true));
});

function moverTarjetas() {
actualizarCarusel('transform 0.5s ease-in-out');
}

function moverTarjetasSinAnimacion() {
setTimeout(() => {
actualizarCarusel('none');
}, 500); // Ajusta este valor al tiempo de duración de tu transición CSS
}

function actualizarCarusel(transicion) {
carusel.style.transition = transicion;
carusel.style.transform = `translateX(-${(indice + tarjetas.length) * (350 + 20)}px)`;
contador.textContent = `${(indice % tarjetas.length) + 1} / ${tarjetas.length}`;
}

btnAtras.addEventListener('click', () => {
clearInterval(autoPlay);
indice--;
moverTarjetas();
if (indice === -1) {
indice = tarjetas.length - 1;
moverTarjetasSinAnimacion();
setTimeout(() => {
autoPlay = setInterval(avanzar, 4000);
}, 500);
} else {
moverTarjetas();
autoPlay = setInterval(avanzar, 4000);
}
});

moverTarjetasSinAnimacion();

Код: Выделить всё

.contenedor {
display: grid;
overflow: hidden;
width: 1110px;
}

.carusel {
display: flex;
gap: 20px;
}

.targeta {
background-color: lightblue;
height: 500px;
width: 350px;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}

.targeta.activo {
background-color: lightgray;
}

.btn-atras {
background-color: lightcoral;
}

.contador {
position: absolute;
top: 10px;
right: 10px;
font-size: 2em;
}

Код: Выделить всё

Atrás


1
2
3
4
5

Источник: https://stackoverflow.com/questions/781 ... s-and-html