Date : 11th February 2024

For all the latest browsers

Information

No javascript or jQuery, just HTML and CSS.

A new, simpler method, of having an auto/manual slider.

The slider starts with the images sliding, but if you click/tap a thumbnail image the slider will switch to manual mode.

The clicked/tapped image will appear in the slider.

When in manual mode there is a 'play' icon at the bottom center of the slider. Click/tap this icon to switch back to auto mode.

Switching back to auto mode will start from the current image and will slide to the next image after a short period.

The HTML is very simple and the CSS can be easily updated to any number of images.

The @keyframes slide timing will need to be recalculated for a change in the number of images.

It is a pity that calc() cannot be used for the @keyframes timings.

Please consider making a donation, every little helps.