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

Only CSS and HTML, no javascript, jQuery or any other version of CSS. Also no chekbox or radio inputs.
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 uses CSS variables to set the timings, image size and the number of images. This makes it easy to adapt to any number of images and timings.

It is a pity that CSS does not handle using:
@property syntax: "<integer>"
in a @keyframes animation.

If you have a @keyframes animation, where --num is an integer and the timing is 10s:

@keyframes slide1a {
from {--num: 0;}
to {--num: 10;}
}

You would expect the time from 0 to 1 would be 1s.

BUT this timing is only 0.5s.

It looks like CSS treats 'integers' as 'numbers' but rounds them up or down to the nearest integer, so that values below 0.5 are rounded down to the nearest integer, BUT values above 0.5 are rounded up to the nearest integer.

I have overcome this by using a 'number' for the @keyframes animation and converting this to an integer using:
--int: max(var(--num) - 0.5, 0);.

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.