Date : 23th October 2024

For all the latest browsers

CSS ONLY carousel slideshow with automatic and manual controls

Information

I knew it was possible, but it has taken a long time to produce this version of a CSS only carousel slideshow.

I believe this is the first fully working version of this type of carousel slideshow using just CSS.

This slideshow uses CSS variables and, as such, is easily adapted to any number and size of images.

On page load the slideshow is in auto running mode and when on the last image the first image will slide in from the right, making this a 'wrap around' slideshow.

Click/tap on any of the thumbnail images to stop auto running, switching to manual mode, and slide left or right to the selected image.

In manual mode you will see an arrow at the top left of the slideshow.

Whilst in manual mode you can click/tap any thumbnail image to 'slide in' that image.

To switch back to auto mode just click/tap the arrow at the top left of the slideshow. This will continue the slideshow from the currently selected image.

All done with just CSS, no jQuery, javascript, any other scripting language or any other preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets, such as SASS, LESS and SCSS.

Please respect my copyright and a donation for use would be appreciated.

Please consider making a donation, every little helps.