1/12
2/12
3/12
4/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12Just CSS. Absolutely NO jQuery/javascript or any other programming language.
I have taken the thumbnail scrolling from my previous slideshow and converted it to a full size full width gallery.
The slideshow has 12 images which can be scrolled left and right in a loop.
The images will wrap around so that if you are on the last image you can use the right arrow to scroll to the first image again.
If you are on the first image you can scroll to the left to see the last image.
There are 6 images visible on screens wider than 1400px.
On screens smaller than 1400px there are 5 images visible.
On screens smaller then 1000px there are 4 images visible.
On screens smaller than 700px there are 3 images visible.
This takes just changing two lines of CSS for each change.
The HTML is easy to understand and update for any number of images, and the CSS although lengthy is also fairly easy to understand if you have a good knowledge of CSS.
The CSS uses CSS variables to set up the number of visible images and the animation time.
Finally, the left/right arrows are 'covered' whilst the images slide so that you cannot 'fast click' these until the slide has completed.
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 use of this demo would be appreciated.