Scroll-Snap Carousel

<!-- The whole carousel is one scroll-snap container: swipe, trackpad and the
     browser's own focus scrolling all page it for free. The track is a focusable
     scroll region; the dots call scrollTo, and no transform is ever set. -->
<section class="max-w-2xl" aria-roledescription="carousel" aria-label="Product highlights" data-ss>
  <div class="flex snap-x snap-mandatory overflow-x-auto scroll-smooth rounded-xl [scrollbar-width:none] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:scroll-auto dark:focus-visible:ring-blue-400 [&::-webkit-scrollbar]:hidden" role="group" aria-label="Slides, scrollable" tabindex="0" data-ss-track>
    <div class="w-full shrink-0 snap-center basis-full bg-gradient-to-br from-blue-600 to-indigo-600 px-8 py-12 text-white" role="group" aria-roledescription="slide" aria-label="1 of 3"><h3 class="mb-2 text-xl font-semibold">Analytics</h3><p class="text-sm leading-relaxed text-white/90">Every metric that matters, updated the moment it changes.</p></div>
    <div class="w-full shrink-0 snap-center basis-full bg-gradient-to-br from-indigo-600 to-violet-600 px-8 py-12 text-white" role="group" aria-roledescription="slide" aria-label="2 of 3"><h3 class="mb-2 text-xl font-semibold">Automations</h3><p class="text-sm leading-relaxed text-white/90">Turn a repeated click into a rule that runs itself.</p></div>
    <div class="w-full shrink-0 snap-center basis-full bg-gradient-to-br from-teal-700 to-sky-700 px-8 py-12 text-white" role="group" aria-roledescription="slide" aria-label="3 of 3"><h3 class="mb-2 text-xl font-semibold">Integrations</h3><p class="text-sm leading-relaxed text-white/90">Forty connectors, and a webhook for everything else.</p></div>
  </div>
  <div class="mt-3 flex justify-center gap-2" data-ss-dots>
    <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:hover:bg-gray-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="button" aria-label="Go to slide 1"></button>
    <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:hover:bg-gray-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="button" aria-label="Go to slide 2"></button>
    <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:hover:bg-gray-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="button" aria-label="Go to slide 3"></button>
  </div>
</section>

<script>
  (function () {
    document.querySelectorAll('[data-ss]').forEach(function (root) {
      var track = root.querySelector('[data-ss-track]');
      var slides = Array.prototype.slice.call(track.children);
      var dots = Array.prototype.slice.call(root.querySelectorAll('[data-ss-dots] button'));
      dots.forEach(function (dot, i) {
        dot.addEventListener('click', function () {
          var slide = slides[i];
          if (slide) track.scrollTo({ left: slide.offsetLeft - track.offsetLeft, behavior: 'smooth' });
        });
      });
      // Reflect the scrolled position on the dots.
      track.addEventListener('scroll', function () {
        var current = Math.round(track.scrollLeft / track.clientWidth);
        dots.forEach(function (dot, i) { if (i === current) dot.setAttribute('aria-current', 'true'); else dot.removeAttribute('aria-current'); });
      });
      var first = dots[0];
      if (first) first.setAttribute('aria-current', 'true');
    });
  })();
</script>