Estoy tratando de hacer un carrusel suave, infinito y automático para mis imágenes, pero estoy atascado. Creo que tengo el carrusel en movimiento (pensando que puedo estar moviendo el div incorrecto). La parte con la que estoy luchando es hacer que las imágenes vuelvan a girar cuando salen de la página, haciéndola infinita. Me encantaría un poco de ayuda.
Gracias LM
const carousel = document.querySelector(".carousel1"); const imageSection = document.querySelector(".imagesection"); let sliders = document.querySelectorAll('.sliders'); let increment= 0; let index = 1; const interval = 100; const firstClone = sliders[0].cloneNode(true); const lastClone = sliders[sliders.length -1].cloneNode(true); let check = sliders.offsetHeight console.log(check) // Append the firstclone to the back of the carousel carousel.appendChild(firstClone); let timer = setInterval(() => { increment++ carousel.style.transform = `translateY(-${increment}px)` console.log('hey') }, interval); .imagesection{ width: 50%; border: 1px solid blue; display: flex; flex-direction: row; overflow: hidden; } .carousel1{ border: 1px solid pink; width: 35%; margin:0 2.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sliders{ border-radius: 5px; width: 100%; height: 300px; margin: 5px 0; object-fit: cover; } .images{ border-radius: 5px; width: 100%; height: 100%; <div class="container"> <div class="heading"> <h1>Hey Luke</h1> </div> <div class="imagesection"> <!-- IMAGE SECTION 1 --> <div class="carousel1"> <div class="sliders"> <img class="images" src="./images/bekir-donmez-eofm5R5f9Kw-unsplash.jpg" alt="clone"> </div> <div class="sliders"> <img class="images" src="./images/conscious-design-eZIE5ZFR7Cs-unsplash.jpg" alt="second clone"> </div> <div class="sliders"> <img class="images" src="./images/dane-wetton-t1NEMSm1rgI-unsplash.jpg" alt="third clone"> </div> <div class="sliders"> <img class="images" src="./images/ginny-rose-stewart-UxkcSzRWM2s-unsplash (1).jpg" alt=""> </div> </div>