Date : 12th January 2022

For all the latest browsers

Click/Tap arrows to loop through slides

Or click/tap the buttons to select any slide

Information

Absolutely NO jQuery/javascript or any other programming language.

This is about as far as CSS can go to emulate jQuery/javascript slideshows.

The slides can be selected using the buttons at the bottom of the slideshow and the selected slide will be shown without having to show the slides between the current slide and the one selected.

You can also use the left and right arrows to step through the slides in any direction. When you are on the last slide then click/tapping the right arrow will move to the first slide and this will slide in from the right.
Also if you are in the first slide and click/tap the left arrow the last slide will slide in from the left.

Unlike some other slideshows, you cannot select the 'next' slide before the current selection is fully shown.

This uses CSS variables for the number of slides, the transition speed and the maximum width.

The HTML is very simple and can be easily adjusted for any number of slides.

The CSS is also fairly simple and if you have a good knowledge can easily be adapted to any number of slides and also any size of images.

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

A donation for the use of this slideshow would be appreciated.

Please consider making a donation, every little helps.