Date : 28th January 2024

For all the latest browsers


Information

No javascript or jQuery, just HTML and CSS.

In fact there are no 'img', 'label' tags used. Just an <hr> tag 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.

So the html for this demo is:

<div id="slides">
  <hr>
  <div id="thumbs">
   <input type="radio" id="p1" name="show" checked>
   <input type="radio" id="p2" name="show">
   <input type="radio" id="p3" name="show">
   <input type="radio" id="p4" name="show">
   <input type="radio" id="p5" name="show">
   <input type="radio" id="p6" name="show">
  </div>
</div>

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

Please consider making a donation, every little helps.