<div class="slider">
  <div class="slider-content">
    <img src="https://source.unsplash.com/random/900x400"><img src="https://source.unsplash.com/random/900x401"><img src="https://source.unsplash.com/random/900x402">
  </div>
</div>

.slider {
  margin: auto;
  width: 900px;
  height: 400px;
  overflow: hidden;
}
.slider-content {
  width: 2700px;
  height: 400px;
  position: relative;
  animation-name: slider;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
@keyframes slider {
  0% {
    left: 0px;
  }
  20% {
    left: 0px;
  }
  25% {
    left: -900px;
  }
  70% {
    left: -900px;
  }
  75% {
    left: -1800px;
  }
  100% {
    left: -1800px;
  }
}