The CSS Play method of controlling a CSS ONLY slideshow using the latest CSS styles @container, sibling-index() and tan().

Only CSS and HTML, no javascript, jQuery or any other version of CSS.

This is another simple slideshow. All the variables are held as CSS variables. All you need to do is update the CSS depending on the number of images and the timings.

Also add the the images to the HTML with their associated inputs.

The CSS and HTML are commented to indicate the function of each section.

The CSS uses tan() calculation to work out the center position of the circle of images, depending on the number of images and their aspect ratio. No need for you to calculate this.

It also uses sibling-index() to work out the rotation of each image to form the circle. It is a pity that Firefox does not yet support this style, so I have included styles that Firefox understands.

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.