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

This slideshow is for images of any aspect ratio, but can easily be adapted to suit any single aspect ratio set of images.

The slideshow images can be selected by click/tapping the square buttons or the thumbnail images at the bottom of the slideshow and it will continue from that selected slide. You can also click/tap the arrows to select the next or prevous slide. The selected images and text will be shown next without having to scroll through the slideshow slides between the current slide and the selected slide.

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

You can easily remove any of the controls by removing the html code for that control. So you can have any combination of controls using this method.

In this demo I have removed the bullets when the browser window is 720px wide or less, and also removed the thumbnails when the browser window is 480px wide or less.

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

The slideshow is responsive.

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.