Embla Carousel Autoplay with Progress Bar and Pause Control — Free Snippet

<section class="eap" aria-roledescription="carousel" aria-label="Announcements">
  <div class="eap-viewport" id="eapViewport">
    <div class="eap-container">
      <article class="eap-slide" style="--c1:#4f46e5;--c2:#7c3aed"><span class="eap-tag">New</span><h3>Dark mode is here</h3><p>Every screen now follows your system theme, with a manual override in settings.</p></article>
      <article class="eap-slide" style="--c1:#0891b2;--c2:#0d9488"><span class="eap-tag">Webinar</span><h3>Scaling design systems</h3><p>Thursday 17:00 UTC — live Q&amp;A with the platform team.</p></article>
      <article class="eap-slide" style="--c1:#db2777;--c2:#e11d48"><span class="eap-tag">Offer</span><h3>30% off annual plans</h3><p>Upgrade before the end of the month to lock in the lower price.</p></article>
      <article class="eap-slide" style="--c1:#ea580c;--c2:#ca8a04"><span class="eap-tag">Guide</span><h3>Migrating to v5</h3><p>A step-by-step checklist with codemods for the breaking changes.</p></article>
    </div>
  </div>
  <div class="eap-bar">
    <button class="eap-play" id="eapPlay" type="button" aria-label="Pause autoplay">❚❚</button>
    <div class="eap-progress" aria-hidden="true"><div class="eap-fill" id="eapFill"></div></div>
    <div class="eap-num" id="eapNum"></div>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.eap{width:100%;max-width:700px}
.eap-viewport{overflow:hidden;border-radius:20px}
.eap-container{display:flex;touch-action:pan-y pinch-zoom}
.eap-slide{flex:0 0 100%;min-width:0;min-height:230px;padding:34px 36px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));display:flex;flex-direction:column;justify-content:flex-end}
.eap-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:999px;margin-bottom:auto}
.eap-slide h3{font-size:26px;margin-top:24px}
.eap-slide p{font-size:14px;opacity:.9;margin-top:6px;max-width:460px}
.eap-bar{display:flex;align-items:center;gap:12px;margin-top:14px}
.eap-play{width:36px;height:36px;border-radius:50%;border:1px solid #cbd5e1;background:#fff;cursor:pointer;font-size:11px;color:#0f172a;flex:0 0 auto}
.eap-play:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.eap-progress{flex:1;height:4px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.eap-fill{height:100%;width:100%;background:#6366f1;transform-origin:left;transform:scaleX(0)}
.eap-num{font:600 12px system-ui;color:#475569;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}

var DELAY = 4000;
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Autoplay is a plugin: pass an instance in the third argument.
// stopOnInteraction:false means a swipe restarts the timer rather than
// switching autoplay off for good; stopOnMouseEnter pauses while hovered.
var autoplay = EmblaCarouselAutoplay({
  delay: DELAY,
  stopOnInteraction: false,
  stopOnMouseEnter: true,
  playOnInit: !reduce,
});
var embla = EmblaCarousel(document.getElementById('eapViewport'), { loop: true }, [autoplay]);

var fill = document.getElementById('eapFill');
var num = document.getElementById('eapNum');
var playBtn = document.getElementById('eapPlay');
var total = embla.slideNodes().length;
var userPaused = reduce;

// The bar is driven by the plugin's own timer, not a separate one, so it
// can never drift out of step with the real slide change. timerset fires
// whenever a new countdown starts; timerstopped when it is cancelled.
function startBar() {
  var remaining = autoplay.timeUntilNext();
  if (remaining === null) return;
  fill.style.transition = 'none';
  fill.style.transform = 'scaleX(' + (1 - remaining / DELAY) + ')';
  fill.getBoundingClientRect(); // commit the start position before animating
  fill.style.transition = 'transform ' + remaining + 'ms linear';
  fill.style.transform = 'scaleX(1)';
}
function freezeBar() {
  var current = getComputedStyle(fill).transform;
  fill.style.transition = 'none';
  fill.style.transform = current === 'none' ? 'scaleX(0)' : current;
}

embla.on('autoplay:timerset', startBar);
embla.on('autoplay:timerstopped', freezeBar);
embla.on('select', function () {
  fill.style.transition = 'none';
  fill.style.transform = 'scaleX(0)';
  num.textContent = (embla.selectedScrollSnap() + 1) + ' / ' + total;
});
num.textContent = '1 / ' + total;
// The first countdown starts DURING EmblaCarousel(...), before the
// listeners above exist, so its timerset event was missed. Start the bar
// for that first slide by hand.
startBar();

function setPlaying(playing) {
  playBtn.textContent = playing ? '❚❚' : '▶';
  playBtn.setAttribute('aria-label', playing ? 'Pause autoplay' : 'Play autoplay');
}
setPlaying(!userPaused);

playBtn.addEventListener('click', function () {
  userPaused = !userPaused;
  if (userPaused) autoplay.stop(); else autoplay.play();
  setPlaying(!userPaused);
});

// WCAG 2.2.2: moving content must be pausable. Keyboard users get the same
// pause as mouse users: focus inside the carousel stops the timer.
var section = document.querySelector('.eap');
section.addEventListener('focusin', function () { autoplay.stop(); });
section.addEventListener('focusout', function (e) {
  if (!section.contains(e.relatedTarget) && !userPaused) autoplay.play();
});