Date : 4th April 2022

For all the latest browsers

Auto wrap Keyframes Slideshow with Pause

Hover slideshow to pause

Information

Just CSS. Absolutely NO jQuery/javascript or any other programming language.

About as simple as it gets to produce a wrap around slideshow with a pause on hover feature.

The HTML for the five images is just 10 lines and will increase by one line for each extra slide.

The stylesheet is also very simple, using CSS variables to do most of the calculations and is just 50 lines including three @keyframes.

The @keyframes do all of the work. The first (shift) shifting the position of the images, the second (slide) showing and sliding the images, and the third (count) positoning the current slide indication.

The first and second @keyframes work together to ensure that there is a wrap around effect when moving from the last slide back to the first.

This method will work with any number of slides and is easy to update to suit.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.

Please consider making a donation, every little helps.