.slider {
 overflow: hidden;
 width: 100vw;
 height: 100vh;
 position: relative;
}
 
.slider .slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-size: 100%;
 background-position: 0px -300px;
 animation: slider 20s infinite;
}
 
.slider .slide:nth-child(1) {
   background-image: url('/images/slide1.jpg');
   animation-delay: 0s;
}

.slider .slide:nth-child(2) {
   background-image: url('/images/slide2.jpg');
   animation-delay: -4s;
}

.slider .slide:nth-child(3) {
   background-image: url('/images/slide3.jpg');
   animation-delay: -8s;
}

.slider .slide:nth-child(4) {
   background-image: url('/images/slide4.jpg');
   animation-delay: -12s;
}

.slider .slide:nth-child(5) {
   background-image: url('/images/slide5.jpg');
   animation-delay: -16s;
}


@keyframes slider {
 0%, 5%, 100% {
   transform: translateX(0);
   animation-timing-function: ease;
 }
 20% {
   transform: translateX(-100%);
   animation-timing-function: step-end;
 }
 85% {
   transform: translateX(100%);
   animation-timing-function: ease;
 }
}