(improve) carousel add keyboard events for left and right touch

diff --git a/themes/xen-project/assets/js/carousel.js b/themes/xen-project/assets/js/carousel.js
index 08f8553a05ab7a7d5a7ecaf5dfbf3f661a1ffcf1..1dbbb4d1c7d77c30965d9a3c70860d9ac3ec32d7 100644 (file)
--- a/themes/xen-project/assets/js/carousel.js
+++ b/themes/xen-project/assets/js/carousel.js
@@ -17,18 +17,33 @@
     const lastItem = firstItem.cloneNode(true);
     itemsContainer.append(lastItem);
 
-    element.querySelector(".carousel-button.prev").addEventListener("click", () => {
-      itemsContainer.scrollBy({
-        left: -firstItem.clientWidth,
-        behavior: "smooth",
-      });
+    let isHovered = false;
+    let hasBeenFocused = false;
+    element.addEventListener("mouseenter", (e) => {
+      isHovered = true;
+    });
+    element.addEventListener("mouseleave", () => {
+      isHovered = false;
     });
 
-    element.querySelector(".carousel-button.next").addEventListener("click", () => {
-      itemsContainer.scrollBy({
-        left: firstItem.clientWidth,
-        behavior: "smooth",
-      });
+    element.addEventListener("focusin", () => {
+      hasBeenFocused = true;
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (hasBeenFocused || isHovered) {
+        if (event.key === "ArrowLeft") {
+          itemsContainer.scrollBy({
+            left: -firstItem.clientWidth,
+            behavior: "smooth",
+          });
+        } else if (event.key === "ArrowRight") {
+          itemsContainer.scrollBy({
+            left: firstItem.clientWidth,
+            behavior: "smooth",
+          });
+        }
+      }
     });
 
     function updateCarouselTabIndexes() {