Example of a slideshow picture gallery

Slideshows are a very common picture gallery type. Unfortunately I did not manage to find a simple and highly editable slideshow on the web, so I developed my own in few days. I publish it here, feel free to modify and customize it, it’s made for !

Demo & code

Go to this page to see the code and the output

As you can see, the slideshow is automatically played when the page is loaded. The visitor can select an image to see it in details (this action will pause the slideshow).

I tried to make the CSS code as compact as possible. You have here the minimum to display your slideshow in a readable way. It seems long because of all the comments, actually it’s not so much.

The javascript part is the most complex one. Read carefully the comments if you want to understand how it works.

Have a nice code exploration !