The CSS Play method of controlling a CSS ONLY slideshow using @container queries.

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

The slideshow images can be selected by click/tapping the thumbnails at the bottom of the slideshow, or the left/right arrows and it will continue from that selected slide.

You can pause the slideshow by click/tapping the pause icon. To continue with the slideshow click tap the 'play' icon, select another image, or click/tap anywhere off the 'pause / play' icons.

It is a pity that Firefox does not yet support @container 'style' queries. This browser looks like it is 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.