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

An update to the original SLIDE-STEP slideshow to improve the appearance.

The slide indicator now has a slide action and a wrap around effect when moving from the last image back to the first.

The 'PAUSE' and 'PLAY' is now controlled by click/tap of the button below the slideshow. This can only be activated while the slides are stationary.

There is now an information panel that will slide down when the image is hovered. For touch screens tap the image to see this and tap off the image to slide up.

Again, CSS variables are used so that there is only one calculation necessary for any number of images.

For this demonstration I have used 5 images with a show time of 4.5s and a slide time of 0.5s.

The only calculation necessary is the @keyframes slide and I have commented this in the stylesheet. Again, it is a pity that CSS variables are not allowed in @keyframes percentage values.

This is also responsive.

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