He estado intentando durante muchas horas hacer que mi control deslizante se mueva automáticamente. HTML:

 <div class="sec1"> <div class="slider1 slider"></div> <div class="slider2 slider"></div> <div class="slider3 slider"></div> </div>

CSS:

 .slider1 { height: 65vh; background-image: url("pictures/slider1.jpg"); background-size: cover; } .slider2 { height: 65vh; background-image: url("pictures/slider2.jpg"); background-size: cover; } .slider3 { height: 65vh; background-image: url("pictures/slider3.jpg"); background-size: cover; } .slider:not(:first-child) { display: none; }

JavaScript:

 let index = 1; setInterval(movePicture, 1000); function movePicture() { let slider = document.getElementsByClassName("slider"); if (index > 8) {index = 1} for (let picture = 0; picture < slider.length; picture++) { slider[picture].style.display = "none"; } slider[index-1].style.display = "block"; index++; }

Solo cambia la imagen. Quiero que se mueva hacia un lado como si las imágenes se deslizaran y empujaran entre sí.