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

.slider .slide:nth-child(2) {
   background-image: url('/Resources/MSportrait.jpg');
   animation-delay: -24s;
}


@keyframes slider {
  0%, 46%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  50% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  96% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}