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

The slideshow frames can be selected by click/tapping the square buttons at the bottom of the slideshow and it will continue from that selected image. The selected image will be shown next without having to scroll through the slideshow images between the current image and the selected image.

Click/tap an image to pause the slideshow. A 'pause' icon will appear at the top center of the slide.

To switch back to autoplay just click/tap off the slideshow, or click/tap another image selection from the square buttons.

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

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.