Vertical Content Carousel — HTML CSS JS Snippet

<div class="vcc-wrap">
  <button class="vcc-btn vcc-up" id="vccUp" aria-label="Previous">▲</button>
  <div class="vcc-viewport">
    <div class="vcc-track" id="vccTrack">
      <div class="vcc-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><span>🎧</span><h3>Headphones</h3></div>
      <div class="vcc-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)"><span>📷</span><h3>Camera</h3></div>
      <div class="vcc-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)"><span>⌚</span><h3>Watch</h3></div>
      <div class="vcc-slide" style="background:linear-gradient(160deg,#10b981,#047857)"><span>🎮</span><h3>Console</h3></div>
    </div>
  </div>
  <button class="vcc-btn vcc-down" id="vccDown" aria-label="Next">▼</button>
  <div class="vcc-dots" id="vccDots"></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}
.vcc-wrap{display:flex;align-items:center;gap:14px}
.vcc-viewport{width:220px;height:220px;overflow:hidden;border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,.16)}
.vcc-track{display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.vcc-slide{flex:0 0 220px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff}
.vcc-slide span{font-size:42px}
.vcc-slide h3{font-size:16px;font-weight:800}
.vcc-btn{width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #e3e5ea;color:#4b5563;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.vcc-btn:hover{border-color:#6366f1;color:#6366f1}
.vcc-dots{display:flex;flex-direction:column;gap:7px}
.vcc-dot{width:7px;height:7px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;transition:background .2s,height .2s}
.vcc-dot.active{background:#6366f1;height:20px;border-radius:4px}

var track = document.getElementById('vccTrack');
var slides = document.querySelectorAll('.vcc-slide');
var dotsWrap = document.getElementById('vccDots');
var current = 0;

slides.forEach(function (s, i) {
  var d = document.createElement('button');
  d.className = 'vcc-dot';
  d.setAttribute('aria-label', 'Go to slide ' + (i + 1));
  d.addEventListener('click', function () { goTo(i); });
  dotsWrap.appendChild(d);
});
var dots = document.querySelectorAll('.vcc-dot');

function render() {
  track.style.transform = 'translateY(' + (-current * 100) + '%)';
  dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });
}

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

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

// Vertical drag/swipe support
var dragging = false;
var startY = 0;
var viewport = document.querySelector('.vcc-viewport');
viewport.addEventListener('pointerdown', function (e) { dragging = true; startY = e.clientY; });
window.addEventListener('pointerup', function (e) {
  if (!dragging) return;
  dragging = false;
  var dy = e.clientY - startY;
  if (Math.abs(dy) > 30) { dy < 0 ? next() : prev(); }
});
viewport.addEventListener('touchstart', function (e) { startY = e.touches[0].clientY; }, { passive: true });
viewport.addEventListener('touchend', function (e) {
  var dy = e.changedTouches[0].clientY - startY;
  if (Math.abs(dy) > 30) { dy < 0 ? next() : prev(); }
});

render();