Pure CSS Responsive Image Slider - Only HTML & CSS 

To have it slide automatically and have the prev and next buttons you might want to consider checking out my "Bootstrap Slider" video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iiUtzrC5BPE.html&t

javascript

Change the keyframe percentages so there are more pauses and the width (in 100 x # of photos percentage).

I have made an image slider like this but it is very complex with only CSS and the video would be super long. For this, I recommend simply using Bootstrap. See my Bootstrap slider video to see what I mean.

U can make the figure element display:flex , and flex-direction:column, then for the animation instead of using translateX use translateY

try this @keyframes slider { 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%; } }

Hmm Try making the img a background image instead

do a css rule like responsive picture add height and width and then put a id in any imp or just in the div container