Creating a carousel loop infinite using vanilla native JavaScript, CSS, and HTML

Question

I am trying to create an infinite carousel but I have a problem with the back button, when I clone the cards from position 1 to card 5 it does so, but it shows the card in position 1 before cloning 5. How can I fix that problem?

When you reach the card in position 1, then immediately clone the card in position 5 and so on so that you can see that it is an infinite loop. There is not a sliding jump but that it be sequential. I want it with native javascript. Could you tell me where my error is and how to correct it? The current code is semi-functional due to that problem I mentioned, it should work like that.

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);
  }
});

function avanzar() { indice++; moverTarjetas(); if (indice === tarjetas.length) { setTimeout(() => { indice = 0; moverTarjetasSinAnimacion(); }, 500); } } 

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;
}

<div class="btn-atras">Atrás</div>
<div class="contenedor">
  <div class="carusel">
    <div class="targeta">1</div>
    <div class="targeta">2</div>
    <div class="targeta">3</div>
    <div class="targeta">4</div>
    <div class="targeta">5</div>
  </div>
</div>
<div class="contador"></div>