@vcl/vcl/gallery/demo/example-thumbnails.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">
<div class="gallery-header">
  <h2>Gallery Title</h2>
</div>
<div class="gallery navigation-buttons-on-hover" touch-action="pan-y" style="flex-direction: column;">
  <div class="gallery-body-norow">
    <div class="gallery-content" style="display: flex; justify-content: center;">
      <button class="button half-transparent gallery-prev-button">
        <div class="icogram">
          <div class="icon fas fa-caret-left" aria-hidden="true" aria-label="Previous" role="img"></div>
        </div>
      </button>
      <div class="gallery-images-container" style="width: 600px; height: 500px;">
        <img class="gallery-image" src="https://picsum.photos/600/500" alt="Description">
      </div>
      <button class="button half-transparent gallery-next-button">
        <div class="icogram">
          <div class="icon fas fa-caret-right" aria-hidden="true" aria-label="Next" role="img"></div>
        </div>
      </button>
    </div>
  </div>
  <div style="height: 1rem;"></div>
  <div class="gallery-thumbnails-host">
    <div class="gallery-thumbs" touch-action="pan-y">
      <div class="gallery-thumbs-container">
        <div class="gallery-thumb-wrapper">
          <img class="gallery-thumb" src="https://picsum.photos/200/200" alt="Image 1">
        </div>
        <div class="gallery-thumb-wrapper selected">
          <img class="gallery-thumb" src="https://picsum.photos/200/200" alt="Image 2">
        </div>
        <div class="gallery-thumb-wrapper">
          <img class="gallery-thumb" src="https://picsum.photos/200/200" alt="Image 3">
        </div>
        <div class="gallery-thumb-wrapper">
          <img class="gallery-thumb" src="https://picsum.photos/200/200" alt="Image 4">
        </div>
      </div>
    </div>
  </div>
</div>