I have been trying for many hours to make my slider move automatically. 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++;
}  

It just changes the picture. I want it to move to the side like if the pictures are sliding and pushing each other.