Vertical Story-Style Slider — HTML CSS JS Snippet

<div class="vst-phone" id="vstPhone">
  <div class="vst-bars" id="vstBars"></div>
  <div class="vst-header">
    <img class="vst-avatar" src="https://i.pravatar.cc/60?img=32" alt="">
    <div class="vst-who"><strong>fwdtools</strong><span>2h ago</span></div>
  </div>
  <div class="vst-slides" id="vstSlides">
    <div class="vst-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><h2>New tool just dropped 🚀</h2><p>Build sitemaps in one click.</p></div>
    <div class="vst-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)"><h2>1788+ snippets</h2><p>Copy-paste HTML, CSS &amp; JS, free.</p></div>
    <div class="vst-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)"><h2>Export anywhere</h2><p>React, Vue, Angular &amp; Tailwind.</p></div>
    <div class="vst-slide" style="background:linear-gradient(160deg,#10b981,#047857)"><h2>Swipe to see more</h2><p>Tap the sides to move — try it.</p></div>
  </div>
  <button class="vst-tap vst-tap-left" id="vstPrev" aria-label="Previous story"></button>
  <button class="vst-tap vst-tap-right" id="vstNext" aria-label="Next story"></button>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f1117;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.vst-phone{position:relative;width:280px;height:500px;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.vst-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:5px;z-index:3}
.vst-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.vst-bar-fill{height:100%;width:0%;background:#fff;border-radius:3px}
.vst-bar.done .vst-bar-fill{width:100%}
.vst-bar.active .vst-bar-fill{transition:width linear}
.vst-header{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:3}
.vst-avatar{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8)}
.vst-who{display:flex;flex-direction:column;color:#fff;font-size:11px;line-height:1.3}
.vst-who strong{font-size:12.5px}
.vst-who span{opacity:.75}
.vst-slides{position:relative;width:100%;height:100%}
.vst-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 22px 40px;opacity:0;transition:opacity .25s ease}
.vst-slide.active{opacity:1;z-index:1}
.vst-slide h2{color:#fff;font-size:21px;font-weight:800;margin-bottom:8px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.vst-slide p{color:rgba(255,255,255,.88);font-size:13.5px;line-height:1.5}
.vst-tap{position:absolute;top:0;bottom:0;width:34%;border:none;background:transparent;cursor:pointer;z-index:2}
.vst-tap-left{left:0}
.vst-tap-right{right:0}

var slides = document.querySelectorAll('.vst-slide');
var barsWrap = document.getElementById('vstBars');
var current = 0;
var DURATION = 4000;
var timer = null;

slides.forEach(function () {
  var bar = document.createElement('div');
  bar.className = 'vst-bar';
  bar.innerHTML = '<div class="vst-bar-fill"></div>';
  barsWrap.appendChild(bar);
});
var bars = document.querySelectorAll('.vst-bar');

function render() {
  slides.forEach(function (s, i) { s.classList.toggle('active', i === current); });
  bars.forEach(function (b, i) {
    var fill = b.querySelector('.vst-bar-fill');
    fill.style.transition = 'none';
    b.classList.toggle('done', i < current);
    b.classList.toggle('active', i === current);
    if (i < current) { fill.style.width = '100%'; }
    else if (i > current) { fill.style.width = '0%'; }
    else {
      fill.style.width = '0%';
      // force reflow so the transition restarts cleanly on repeated visits
      void fill.offsetWidth;
      fill.style.transition = 'width ' + DURATION + 'ms linear';
      requestAnimationFrame(function () { fill.style.width = '100%'; });
    }
  });
}

function goTo(i) {
  if (i < 0) i = 0;
  if (i >= slides.length) { current = slides.length - 1; render(); return; }
  current = i;
  render();
  restart();
}

function next() { if (current < slides.length - 1) goTo(current + 1); }
function prev() { if (current > 0) goTo(current - 1); }

function restart() {
  clearTimeout(timer);
  timer = setTimeout(function () {
    if (current < slides.length - 1) next();
  }, DURATION);
}

document.getElementById('vstNext').addEventListener('click', next);
document.getElementById('vstPrev').addEventListener('click', prev);

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

render();
restart();