Embla Carousel Vertical News Ticker — Free Headline Rotator Snippet

<div class="evt">
  <div class="evt-card">
    <div class="evt-label"><span class="evt-live"></span>Breaking</div>
    <div class="evt-viewport" id="evtViewport" aria-live="off">
      <div class="evt-container" id="evtList"></div>
    </div>
    <div class="evt-ctrl">
      <button type="button" id="evtUp" aria-label="Previous headline">▲</button>
      <button type="button" id="evtDown" aria-label="Next headline">▼</button>
      <button type="button" id="evtPause" aria-label="Pause ticker">❚❚</button>
    </div>
  </div>
  <p class="evt-note">Headlines rotate every 3.5 s · hover, focus or press pause to stop</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.evt{width:100%;max-width:760px}
.evt-card{display:flex;align-items:stretch;background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.06)}
.evt-label{display:flex;align-items:center;gap:8px;background:#dc2626;color:#fff;font:800 12px system-ui;letter-spacing:.08em;text-transform:uppercase;padding:0 16px;flex:0 0 auto}
.evt-live{width:8px;height:8px;border-radius:50%;background:#fff;animation:evtBlink 1.4s infinite}
@keyframes evtBlink{50%{opacity:.25}}
/* A vertical Embla viewport needs an explicit height: slides are stacked
   in a column and the viewport shows exactly one of them. */
.evt-viewport{overflow:hidden;height:56px;flex:1;min-width:0}
.evt-container{display:flex;flex-direction:column;height:100%;touch-action:pan-x pinch-zoom}
.evt-slide{flex:0 0 100%;min-height:0;display:flex;align-items:center;gap:12px;padding:0 16px}
.evt-slide time{font:700 12px system-ui;color:#dc2626;font-variant-numeric:tabular-nums;flex:0 0 auto}
.evt-slide a{color:#0f172a;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt-slide a:hover{text-decoration:underline}
.evt-slide a:focus-visible{outline:2px solid #dc2626;outline-offset:2px;border-radius:3px}
.evt-ctrl{display:flex;border-left:1px solid #e2e8f0}
.evt-ctrl button{width:40px;border:0;background:#fff;color:#475569;font-size:11px;cursor:pointer}
.evt-ctrl button:hover{background:#f8fafc;color:#0f172a}
.evt-ctrl button:focus-visible{outline:2px solid #dc2626;outline-offset:-2px}
.evt-note{font-size:12px;color:#64748b;margin-top:10px;text-align:center}
@media (prefers-reduced-motion:reduce){.evt-live{animation:none}}

var NEWS = [
  ['09:42', 'Central bank holds rates steady for the third straight meeting'],
  ['09:31', 'Open-source browser engine ships native masonry layout by default'],
  ['09:15', 'Heatwave warning extended across southern regions until Friday'],
  ['08:58', 'City council approves car-free weekends on the riverside'],
  ['08:40', 'Chip maker announces new plant, 2,000 jobs expected'],
  ['08:22', 'Underdogs reach the final after a penalty shoot-out'],
];
var list = document.getElementById('evtList');
NEWS.forEach(function (n) {
  list.insertAdjacentHTML('beforeend',
    '<div class="evt-slide"><time>' + n[0] + '</time><a href="#">' + n[1] + '</a></div>');
});

var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var autoplay = EmblaCarouselAutoplay({ delay: 3500, stopOnInteraction: false, stopOnMouseEnter: true, playOnInit: !reduce });

// axis:'y' makes Embla measure heights and translate on the Y axis.
// The container is a flex COLUMN and the viewport has a fixed height.
var embla = EmblaCarousel(document.getElementById('evtViewport'), { axis: 'y', loop: true, duration: 22 }, [autoplay]);

document.getElementById('evtUp').addEventListener('click', function () { embla.scrollPrev(); });
document.getElementById('evtDown').addEventListener('click', function () { embla.scrollNext(); });

var pauseBtn = document.getElementById('evtPause');
var userPaused = reduce;
function paint() {
  pauseBtn.textContent = userPaused ? '▶' : '❚❚';
  pauseBtn.setAttribute('aria-label', userPaused ? 'Play ticker' : 'Pause ticker');
}
paint();
pauseBtn.addEventListener('click', function () {
  userPaused = !userPaused;
  if (userPaused) autoplay.stop(); else autoplay.play();
  paint();
});

// Only the visible headline's link is tabbable; focusing the ticker pauses it.
var slides = embla.slideNodes();
function syncTab() {
  var sel = embla.selectedScrollSnap();
  slides.forEach(function (s, i) {
    s.setAttribute('aria-hidden', i === sel ? 'false' : 'true');
    s.querySelector('a').tabIndex = i === sel ? 0 : -1;
  });
}
embla.on('select', syncTab);
syncTab();

var card = document.querySelector('.evt-card');
card.addEventListener('focusin', function () { autoplay.stop(); });
card.addEventListener('focusout', function (e) { if (!card.contains(e.relatedTarget) && !userPaused) autoplay.play(); });
list.addEventListener('click', function (e) { if (e.target.closest('a')) e.preventDefault(); });