FINALLY!! a CSS ONLY automatic slideshow that allows you to manually select the next image without switching to a manual mode.

The slideshow stays in automatic mode and after selecting the next image shown it will continue in automatic mode from the selected image.

This uses 'transitions' instead of @keyframes to animate the images so there is no jump when selecting a new image.

However, it does use two @keyframes that increase the width of a containing element. The width is checked using @container queries and it is this width that is used to select the image to be displayed.

So, with just a few lines of CSS and HTML, finally a slideshow to match a javascript/jQuery version and it works in all the latest browsers.

If you want to use this slideshow in your website design please keep the copyright comment in the stylesheet and consider making a support donation. Every little helps in keeping this website going. Note that I have stopped using intrusive Google advertising.