CSS PLAY
Doing It With Style
No javascript, jQuery, PHP or any other scripting language, just plain CSS.
A simpler version of the previous slideshow, but the only downside is that it does not work using Firefox. This browser is lagging behind others with its supprt of the latest CSS styles. It does not yet (3rd July 2023) support @property and :has().
The update makes the HTML and CSS simpler. The radio inputs are styled to hold the images as background images. So all these images are now radio inputs and as such they can be targetted directly to control their size and visibility.
Just click/tap the buttons to select a slide and that slide will scroll into view without having to show all the slides between the current slide and the chosen slide.
On smaller screen sizes the buttons will wrap on to two or more lines and will still control the slides.
This slideshow can be used with any number of slides with only 'minor' changes.
The HTML requires simple updates, and the CSS just needs additional lines added to each section.
The speed of slide and size of images is controlled by two CSS variables.
The animation is just one transition, no @keyframes animation.
The stylesheet for this demonstration is in the page <head> </head>, 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.