/* Contenedor: clips la tira */
.viewport { overflow: hidden; }
/* Tira: todos los slides en fila */
.strip {
display: flex;
transition: transform 0.55s cubic-bezier(0.77,0,0.175,1);
}
/* JS mueve la tira */
strip.style.transform = `translateX(-${current * 100}%)`;
¿Cómo funciona? Todos los slides están en una
.strip de display: flex, cada uno con flex: 0 0 100%. El .viewport tiene overflow: hidden y actúa como ventana. JS aplica translateX(-N * 100%) a la tira para mover el slide deseado a la vista. La transición CSS controla la animación — puedes cambiar el easing con los botones arriba.