JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>Slider 6 auto</title>
<style>
*{box-sizing: border-box}

body{margin:0;overflow:hidden}
	
@keyframes animation_slide {
0% {left:0}
20%{left:0}

25%{left:-100%}
45%{left:-100%}

50%{left:-200%}
70%{left:-200%}

75%{left:-300%}
95%{left:-300%}

100%{left:-400%}
}

@keyframes animation_slide {
	
0% {transform:translateX(0)}
20%{transform:translateX(0)} /* Image 1 */

25%{transform:translateX(-20%)}
45%{transform:translateX(-20%)} /* Image 2 */

50%{transform:translateX(-40%)}
70%{transform:translateX(-40%)}

75%{transform:translateX(-60%)}
95%{transform:translateX(-60%)}

100%{transform:translateX(-80%)}
}

figure img{
	pointer-events:none;
	width: 100vh;
	height: 100vh;		/* 100vh */
	object-fit:contain;
	float:left;
	width:20%
	}
	
	
figure{
	position:relative;
	width:500%; /* 500% */
	margin:0;
	animation:12s animation_slide infinite; 
	}

@media (min-width:62.75rem){
	figure img{
		object-fit: cover;
		}
	}
	
</style>
</head>

<body>
<figure>
<img src="https://www.guyom-design.com/blog/images/3.jpg" alt/> 
<img src="Images/HUB_7443R.jpg" alt="A"/> <!-- Entre D et 1ère image temps très court -->
<img src="Images/HUB_7446R.jpg" alt="B"/> 
<img src="Images/HUB_7491R.jpg" alt="C"/>
<img src="Images/HUB_7508R.jpg" alt="D"/> <!-- Arrêt ... retour 1ère image -->
<img src="Images/HUB_7512R.jpg" alt="E"/> 
<img src="Images/HUB_7520R.jpg" alt="F"/>
<img src="Images/HUB_7526R.jpg" alt="G"/>
<img src="Images/HUB_7555R.jpg" alt="H"/>
<img src="Images/HUB_7604R.jpg" alt="I"/>
<img src="Images/HUB_7612R.jpg" alt="J"/>
<img src="Images/HUB_7626R.jpg" alt="K"/>
</figure>

</body>
</html>