This is a simple auto slideshow that uses @property to allow CSS variables to be used in @keyframes animation.

Using 5 CSS variables to enter the parameters for the slideshow it can be used for any number of slides and any aspect ratio for the images.

There is just one simple manual calculation in the @keyframes slideme animation. This would not be necessary if calc could be used for the percentage values.

The only browser that does not yet support @property is Firefox, so this browser fails to animate the slides.

22nd June 2023

A small update to add the slide number. This uses the same @keyframes routine as the slideshow 'moveme' and converts the integer --lft into a counter-reset value and adds this using the div#slide-number::before content. Again this does not yet work in Firefox.