¿Alguien sabe alguna forma de envolver las imágenes en esta presentación de diapositivas hasta el principio, de modo que el cuadrado azul quede inmediatamente después del cuadrado negro?

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

En este momento, lo mejor que sé hacer es:

 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); } }

He visto sugerencias sobre la duplicación de las primeras imágenes y los retrasos de tiempo/configuración para que parezca perfecto. ¡Cualquier consejo sobre cómo lograr esto con css, javascript, react o jquery es bienvenido (o por cualquier otro medio)!