Just CSS. Absolutely NO jQuery/javascript or any other programming language.

This is a combination of several previous demonstrations.

The slideshow has 12 images which can be selected from the thumbnails across the bottom of the slideshow.

There are 6 thumbnail images visible on screens wider than 800px and these can be scrolled left and right using the arrows.

The thumbnails will wrap around so that if you are on the last image you can use the right arrow to scroll to the first image again.
If you are on the first image you can scroll to the left to see the last image.

On narrower screens the thumbnails become a little to small to see clearly, so using an @media query the number of visible thumbnails reduces so that they are more easily seen.

On smaller than 800px there are 5 thumbnails visible.
On smaller then 650px there are 4 thumbnails visible.
On smaller than 500px there are 3 thumbnails visible.

This takes just changing two lines of CSS for each change.

The thumbnails are shown in grayscale(100%), but clicking a thumbnail will change it to full color and show the fullsize image without having to scroll through all the image between the current selection and the new selection.

The HTML is easy to understand and update for any number of images, and the CSS although lengthy is also fairly easy to understand if you have a good knowledge of CSS.

The CSS uses CSS variables to set up the number of visible thumbnail images and the animation times for the thumbnail image slide and the large image change.

Finally, the left/right arrows are 'covered' whilst the thumbnails slide so that you cannot 'fast click' these until the slide has completed.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.

A donation for use of this demo would be appreciated.