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

This version uses no inputs. No checkboxes, radio inputs or buttons. This uses just :focus.

The slideshow frames can be selected by click/tapping the square buttons in the center of the slideshow and it will continue from that selected image.

Click/tap off the slideshow to reset it to its original start position.

All the animation is done using transitions and is controlled by two @keyframes animations on the #container div.

The two @keyframes animations are identical and very basic @keyframes slide1a {0% {width:10px;} 100% {width:70px;}}
and
@keyframes slide1b {0% {width:10px;} 100% {width:70px;}}.

The timer on each image is just an svg circle with a CSS transition: stroke-dashoffset 16s linear; stroke-dashoffset: 0;

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.