Does anyone know of a way to wrap the images in this slideshow to the beginning, so that the blue square comes immediately after the black square?

https://jsfiddle.net/pgLf2z8u/1/

Right now, the best I know how to do is:

img {
  height: 80vh;
}

#carousel {
  white-space: nowrap;
  overflow-x: hidden;
}

#carousel > img {
  animation-name: slide;
  animation-timing-function: linear;
  animation-delay: infinite;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes slide{
  to{
    transform: translateX(-900px);
  }
}

I've seen suggestions about duplicating the first few images and timing/setting delays so that it seems seamless. Any advice on how to accomplish this with css, javascript, react, or jquery is welcome (or by any other means)!