Date : 2nd September 2024

For all the latest browsers

Simple Auto run Slideshow with play/pause

Information

About as simple as it can get, with no jQuery/javascript or any other programming language. Just HTML and CSS.

This slideshow is just three empty divs with their CSS styling and three @keyframes animations.

The HTML is:
 <div id="outer">
  <div id="slideshow"></div>
  <div id="marker"></div>
 <div>

The @keyframes slides changes the slide image and text at set intervals.

The @keyframes shift slides the images left.

The @keyframes number controls the bar indication of the current slide.

There are only ever two slides visible, with the #slideshow::before showing the current slide, and the #slideshow::after showing the next slide.

Finally, you can hover the slideshow to pause the animation.

Please consider making a donation, every little helps.