Number-Key Jump Carousel — HTML CSS JS Snippet

<div class="nkj-wrap" id="nkjWrap" tabindex="0">
  <div class="nkj-track" id="nkjTrack">
    <div class="nkj-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><span>🎧</span>Headphones</div>
    <div class="nkj-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)"><span>📷</span>Camera</div>
    <div class="nkj-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)"><span>⌚</span>Watch</div>
    <div class="nkj-slide" style="background:linear-gradient(160deg,#10b981,#047857)"><span>🎮</span>Console</div>
    <div class="nkj-slide" style="background:linear-gradient(160deg,#f59e0b,#b45309)"><span>🔊</span>Speaker</div>
  </div>
  <div class="nkj-badges" id="nkjBadges"></div>
  <p class="nkj-hint">Click here, then press 1–5 on your keyboard to jump directly to that slide.</p>
</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}
.nkj-wrap{width:100%;max-width:420px;outline:none}
.nkj-wrap:focus-visible .nkj-track{box-shadow:0 0 0 3px #6366f1}
.nkj-track{position:relative;height:220px;overflow:hidden;border-radius:16px;transition:box-shadow .15s}
.nkj-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;font-weight:800;font-size:16px;opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .35s ease}
.nkj-slide.nkj-active{opacity:1;transform:scale(1);z-index:1}
.nkj-slide span{font-size:44px}
.nkj-badges{display:flex;justify-content:center;gap:8px;margin-top:14px}
.nkj-badge{width:26px;height:26px;border-radius:7px;background:#fff;border:1.5px solid #e3e5ea;color:#6b7080;font:700 12px ui-monospace,monospace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.nkj-badge:hover{border-color:#6366f1;color:#6366f1}
.nkj-badge.active{background:#6366f1;border-color:#6366f1;color:#fff}
.nkj-hint{text-align:center;color:#9ca3af;font-size:11.5px;margin-top:12px}

var wrap = document.getElementById('nkjWrap');
var slides = document.querySelectorAll('.nkj-slide');
var badgesWrap = document.getElementById('nkjBadges');
var current = 0;

slides.forEach(function (s, i) {
  var badge = document.createElement('button');
  badge.className = 'nkj-badge';
  badge.textContent = String(i + 1);
  badge.setAttribute('aria-label', 'Jump to slide ' + (i + 1));
  badge.addEventListener('click', function () { goTo(i); });
  badgesWrap.appendChild(badge);
});
var badges = document.querySelectorAll('.nkj-badge');

function render() {
  slides.forEach(function (s, i) { s.classList.toggle('nkj-active', i === current); });
  badges.forEach(function (b, i) { b.classList.toggle('active', i === current); });
}

function goTo(i) { current = i; render(); }

wrap.addEventListener('keydown', function (e) {
  var n = parseInt(e.key, 10);
  if (!isNaN(n) && n >= 1 && n <= slides.length) { goTo(n - 1); return; }
  if (e.key === 'ArrowRight') goTo((current + 1) % slides.length);
  else if (e.key === 'ArrowLeft') goTo((current - 1 + slides.length) % slides.length);
});

render();