No javascript or jQuery, just HTML and CSS.

Just a little different, having a slideshow with a vertical action instead of a horizontal one, and also have the thumbnails animated.

All the images are placed using content:var() which can be used on any html element and the images are changed using two @keyframes animations.

One for the slide action and the other to jump through the image selection. This gives a smooth scroll with the miimum of calculations.

The CSS makes extensive use of :has() and var()

The slideshow will change images every 5s and wrap around after the 13th image.

Click a thumbnail image to change the current image and continue the slideshow from that image.

This also has a pause/play toggle at the top left of the slideshow. You can pause the slideshow and select any image, then play the slideshow from that image.

The majority of the settings are held in the CSS variables, these include:

--aspect: 3/2; /* images aspect ratio */
--img:13; /* number of images */
--tslide:5s; /* stop and slide times */