Vertical Thumbnail-Nav Carousel — HTML CSS JS Snippet

<div class="vtn-wrap">
  <div class="vtn-thumbs" id="vtnThumbs"></div>
  <div class="vtn-main">
    <div class="vtn-track" id="vtnTrack">
      <div class="vtn-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><span>👟</span></div>
      <div class="vtn-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)"><span>👟</span></div>
      <div class="vtn-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)"><span>👟</span></div>
      <div class="vtn-slide" style="background:linear-gradient(160deg,#10b981,#047857)"><span>👟</span></div>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.vtn-wrap{display:flex;gap:12px;height:320px}
.vtn-thumbs{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:2px}
.vtn-thumb{flex:0 0 62px;width:62px;border-radius:10px;border:2.5px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:26px;opacity:.55;transition:border-color .15s,opacity .15s}
.vtn-thumb.active{border-color:#6366f1;opacity:1}
.vtn-main{position:relative;flex:1;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(15,23,42,.16)}
.vtn-track{display:flex;flex-direction:column;height:100%;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.vtn-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;font-size:90px}

var track = document.getElementById('vtnTrack');
var slides = document.querySelectorAll('.vtn-slide');
var thumbsWrap = document.getElementById('vtnThumbs');
var current = 0;

slides.forEach(function (s, i) {
  var t = document.createElement('button');
  t.className = 'vtn-thumb';
  t.style.background = s.style.background;
  t.innerHTML = '<span>👟</span>';
  t.setAttribute('aria-label', 'View image ' + (i + 1));
  t.addEventListener('click', function () { goTo(i); });
  thumbsWrap.appendChild(t);
});
var thumbs = document.querySelectorAll('.vtn-thumb');

function render() {
  track.style.transform = 'translateY(' + (-current * 100) + '%)';
  thumbs.forEach(function (t, i) {
    t.classList.toggle('active', i === current);
    if (i === current) t.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
  });
}

function goTo(i) { current = i; render(); }
function next() { goTo((current + 1) % slides.length); }
function prev() { goTo((current - 1 + slides.length) % slides.length); }

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowDown') next();
  else if (e.key === 'ArrowUp') prev();
});

render();