The CSS Play method of controlling a CSS ONLY slideshow using the latest CSS style :if().

This slideshow is auto running with the ability to select any slide as the next image, with the slideshow continuing from the selected image.

This version is slightly different to the previous slideshows in that it uses a CSS variable (--n) which is animated using @keyframes. This animated 'value' is then used in by :if() (style) to select the slide.

It would be nice if the @keyframes animation of CSS variables responded to steps(8) so that the animation would be:

@keyframes slide1a {
0% {--n:1;}
100% {--n:9;}
}

It is a pity that Firefox and Safari do not yet support :if() 'style' queries. These browsers looks like they are falling behind with CSS support.

If you want to use this slideshow in your website design please keep the copyright comment in the stylesheet and make a support donation using the PayPal button below. Every little helps in keeping this website going.