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

A wrapping slideshow with play/pause icon and thumbnails to select any slide.

This slideshow uses CSS variables to do all the calculations except one, which is very simple.

There are seven user variables and the CSS then does all the calculations necessary to run the slideshow, no matter how many slides are used, and also calculate the timings.

These variables are:

--slides:7; /* number of slides */
--stat-time:4s; /* stationary time */
--slide-time:1s; /* sliding time */
--photo-width:640;
--photo-height:420;
--active-color:#0006;
--playpause-color:#fff;

The images are also held as CSS variables so that there is no need to enter these three times in the html.

--p1: url(gallery/pic11.jpg);
--p2: url(gallery/pic2.jpg);
--p3: url(gallery/pic3.jpg);
--p4: url(gallery/pic4.jpg);
--p5: url(gallery/pic5.jpg);
--p6: url(gallery/pic7.jpg);
--p7: url(gallery/pic9.jpg);

The thumbnails are just styled radio inputs. NO labels or extra markup, JUST radio inputs.

The play/pause icon, top left of the slide, is also just a styled checkbox input. Again NO label or extra markup, JUST a checkbox input.

You can click any thumbnail image to jump to that image and the slideshow will continue from your selection.

Thumbnail selections can be carried out while the slideshow is playing and while it is paused.

The radio buttons have four states:

unchecked
:checked
:active
:hover

Finally, the thumbnail hover will show a larger image providing your device has a mouse or trackpad using the @media query:

@media (hover: hover) and (pointer: fine) {......}

Update - 15th June 2022

Added an extra element to remove ability to pause slideshow, and to change image, while the images are sliding.

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

Please make a donation for use of this demo.This would be very much appreciated.