Add Navigation Arrow and simplify static page

public/js/slideshow.js

@@ -3,6 +3,23 @@
 
   let images = [];
   let index = 0;
+  let swipe = null;
+
+  function activate(selector, handler) {
+    $(document)
+      .on('pointerup', selector, function (event) {
+        const pointer = event.originalEvent;
+        if (pointer && pointer.isPrimary === false) return;
+        if (pointer?.pointerType === 'mouse' && pointer.button !== 0) return;
+        event.preventDefault();
+        handler.call(this, event);
+      })
+      .on('keydown', selector, function (event) {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        handler.call(this, event);
+      });
+  }
 
   function refreshButton(selector, disabled) {
     const button = $(selector).prop('disabled', disabled);
@@ -30,17 +47,42 @@
       index = 0;
       render();
     },
+
     next() {
       if (images.length) index = (index + 1) % images.length;
       render();
     },
+
     previous() {
       if (images.length) index = (index - 1 + images.length) % images.length;
       render();
     }
   };
 
+  activate('#slide-next', () => ns.Slideshow.next());
+  activate('#slide-prev', () => ns.Slideshow.previous());
+
   $(document)
-    .on('click', '#slide-next', () => ns.Slideshow.next())
-    .on('click', '#slide-prev', () => ns.Slideshow.previous());
+    .on('pointerdown', '#slideshow', function (event) {
+      if ($(event.target).closest('button').length) return;
+      const pointer = event.originalEvent;
+      if (!pointer?.isPrimary) return;
+      swipe = { id: pointer.pointerId, x: pointer.clientX, y: pointer.clientY };
+    })
+    .on('pointerup pointercancel', '#slideshow', function (event) {
+      const pointer = event.originalEvent;
+      if (!swipe || pointer?.pointerId !== swipe.id) return;
+      if (event.type === 'pointercancel') {
+        swipe = null;
+        return;
+      }
+
+      const deltaX = pointer.clientX - swipe.x;
+      const deltaY = pointer.clientY - swipe.y;
+      swipe = null;
+
+      if (Math.abs(deltaX) < 45 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
+      if (deltaX < 0) ns.Slideshow.next();
+      else ns.Slideshow.previous();
+    });
 }(window.Wegwichtel, window.jQuery));