Scroll-snap carousel

<section class="carousel" aria-roledescription="carousel" aria-label="Featured projects">
  <div class="carousel-track" tabindex="0">
    <article class="slide" aria-roledescription="slide" aria-label="1 of 4" style="--slide-color: #3684ff"><b>Launch</b><span>Ship the first version</span></article>
    <article class="slide" aria-roledescription="slide" aria-label="2 of 4" style="--slide-color: #12a150"><b>Measure</b><span>Watch what people use</span></article>
    <article class="slide" aria-roledescription="slide" aria-label="3 of 4" style="--slide-color: #e08a1e"><b>Learn</b><span>Talk to real users</span></article>
    <article class="slide" aria-roledescription="slide" aria-label="4 of 4" style="--slide-color: #c93a3f"><b>Repeat</b><span>Small steps, every week</span></article>
  </div>
  <div class="carousel-controls">
    <button class="carousel-arrow" type="button" data-direction="-1" aria-label="Previous slide">←</button>
    <div class="carousel-dots"></div>
    <button class="carousel-arrow" type="button" data-direction="1" aria-label="Next slide">→</button>
  </div>
</section>

.carousel { width: min(460px, 100%); display: grid; gap: 12px; }

/* The track is a normal horizontal scroller. scroll-snap makes it stop on slides. */
.carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;           /* hide the scrollbar; the dots show position */
  border-radius: 16px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 2 / 1;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 20px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--slide-color), color-mix(in srgb, var(--slide-color) 45%, #000));
  font: 15px system-ui, sans-serif;
}
.slide b { font-size: 26px; letter-spacing: -0.02em; }

.carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carousel-arrow {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font: 600 16px system-ui, sans-serif;
  color: var(--fg);
  background: var(--surface-2);
}
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.carousel-dots { display: flex; gap: 6px; }
.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  background: var(--line);
  transition: width 0.25s, background 0.25s;
}
.carousel-dots button[aria-current="true"] { width: 22px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

// Scroll-snap carousel: the browser does the swiping and snapping. This script
// adds the dots, wires the arrows, and keeps both in sync with the scroll position.

document.querySelectorAll('.carousel').forEach((carousel) => {
  const track = carousel.querySelector('.carousel-track');
  const slides = [...track.children];
  const dotsBox = carousel.querySelector('.carousel-dots');
  const [previousButton, nextButton] = carousel.querySelectorAll('.carousel-arrow');
  let currentIndex = 0;

  function goTo(index) {
    const target = slides[Math.max(0, Math.min(index, slides.length - 1))];
    track.scrollTo({ left: target.offsetLeft - track.offsetLeft });
  }

  // One dot per slide.
  const dots = slides.map((_, index) => {
    const dot = document.createElement('button');
    dot.type = 'button';
    dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
    dot.addEventListener('click', () => goTo(index));
    dotsBox.append(dot);
    return dot;
  });

  function markCurrent(index) {
    currentIndex = index;
    dots.forEach((dot, i) => dot.setAttribute('aria-current', String(i === index)));
    previousButton.disabled = index === 0;
    nextButton.disabled = index === slides.length - 1;
  }

  // A slide counts as current once most of it is visible.
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) markCurrent(slides.indexOf(entry.target));
    }
  }, { root: track, threshold: 0.6 });
  slides.forEach((slide) => observer.observe(slide));

  for (const arrow of [previousButton, nextButton]) {
    arrow.addEventListener('click', () => goTo(currentIndex + Number(arrow.dataset.direction)));
  }

  // Left/right arrow keys while the track is focused.
  track.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowRight') { event.preventDefault(); goTo(currentIndex + 1); }
    if (event.key === 'ArrowLeft') { event.preventDefault(); goTo(currentIndex - 1); }
  });

  markCurrent(0);
});