No javascript or jQuery, just HTML and CSS.

In fact there are no 'img', 'label' tags used. Just two <div> tags to hold the main image and radio inputs for the thumbnails.

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

So the html for this demo is:

<div id="slides">
  <div id="pa"></div><div id="pb"></div>
  <div id="thumbs">
   <input type="radio" id="p1" name="thumb" checked>
   <input type="radio" id="p2" name="thumb">
   <input type="radio" id="p3" name="thumb">
   <input type="radio" id="p4" name="thumb">
   <input type="radio" id="p5" name="thumb">
   <input type="radio" id="p6" name="thumb">
   <input type="radio" id="p7" name="thumb">
   <input type="radio" id="p8" name="thumb">
   <input type="radio" id="p9" name="thumb">
   <input type="radio" id="p10" name="thumb">
  </div>
</div>

The CSS makes extensive use of :has() and var() and also the use of content: to change the content of the <div> tags.

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

Hover the thumbnails to pause the automatic change of images

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

The number of images and the slide times etc. can be changed by updating the HTML/CSS, which is a fairly simple task.

For touch screen devices tap off the thumbnails after selecting to restart the slideshow.