Restore optimized homepage carousel

js/home-carousel.js

@@ -0,0 +1,72 @@
+(function () {
+  "use strict";
+
+  var carousel = document.querySelector("[data-home-carousel]");
+  if (!carousel) return;
+
+  var slides = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-slide]"));
+  var dots = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-dot]"));
+  var previous = carousel.querySelector("[data-carousel-previous]");
+  var next = carousel.querySelector("[data-carousel-next]");
+  var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  var current = 0;
+  var timer = null;
+
+  function show(index) {
+    current = (index + slides.length) % slides.length;
+
+    slides.forEach(function (slide, slideIndex) {
+      var active = slideIndex === current;
+      var link = slide.querySelector("a");
+      slide.classList.toggle("is-active", active);
+      slide.setAttribute("aria-hidden", active ? "false" : "true");
+      if (link) link.setAttribute("tabindex", active ? "0" : "-1");
+    });
+
+    dots.forEach(function (dot, dotIndex) {
+      var active = dotIndex === current;
+      dot.classList.toggle("is-active", active);
+      dot.setAttribute("aria-current", active ? "true" : "false");
+    });
+  }
+
+  function stop() {
+    if (timer) window.clearInterval(timer);
+    timer = null;
+  }
+
+  function start() {
+    stop();
+    if (!reduceMotion && slides.length > 1 && !document.hidden) {
+      timer = window.setInterval(function () {
+        show(current + 1);
+      }, 5000);
+    }
+  }
+
+  previous.addEventListener("click", function () {
+    show(current - 1);
+    start();
+  });
+
+  next.addEventListener("click", function () {
+    show(current + 1);
+    start();
+  });
+
+  dots.forEach(function (dot, dotIndex) {
+    dot.addEventListener("click", function () {
+      show(dotIndex);
+      start();
+    });
+  });
+
+  carousel.addEventListener("mouseenter", stop);
+  carousel.addEventListener("mouseleave", start);
+  carousel.addEventListener("focusin", stop);
+  carousel.addEventListener("focusout", start);
+  document.addEventListener("visibilitychange", start);
+
+  show(0);
+  start();
+})();