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

This uses my recently discovered way to restart/replay and animation using animation:unset.

No need to resort to using javascript/jQuery, or use display:none, or even use two animations.

So a CSS only looping slideshow with manual selection when 'playing' and also when 'paused'.

This uses CSS styled 'radio' and checkbox' inputs for the slide selectors and the play/pause button.

The slideshow uses CSS variables so is easy to update for any number of images of any size, any timing settings and any screen width, with just one simple calculation.

The stylesheet for this demonstration is 'boats/auto-manual.css', but if you use this, please keep my copyright comment with the stylesheet.

A donation for use of this demo would be very much appreciated.