div#slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

div#slider div {
  position: relative;
  width: 500vw;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 30s slider infinite;
}

div#slider div img {
  width: 100vw;
  float: left;
  height: 100vh;
  object-fit: cover;
}

@keyframes slider {
  0% {
    left: 0%;
  }

  15% {
    left: 0%;
  }

  20% {
    left: -100%;
  }

  35% {
    left: -100%;
  }

  40% {
    left: -200%;
  }

  55% {
    left: -200%;
  }

  60% {
    left: -300%;
  }

  75% {
    left: -300%;
  }

  80% {
    left: -400%;
  }

  95% {
    left: -400%;
  }
}

div#counter {
  height: 5px;
  width: 0%;
  background-color: black;
  position: absolute;
  opacity: 0.2;
  z-index: 1;
  animation: 6s counter infinite;
}

@keyframes counter {
  0% {
    width: 0%;
  }
  80% {
    width: 100%;
  }
  81% {
    width: 0%;
  }
}