add animation, stop automatic slideshow when interacted with

assets/scss/snap-gallery.scss

@@ -30,13 +30,28 @@ $gap: var(--gap);
 }
 
 .snap-slideshow {
-
   // Hide all contained images except the first
   .snap-image:not(:first-child) {
     display: none;
   }
 }
 
+// Animation
+.snap-slideshow .snap-image,
+.snap-lightbox .snap-lightbox-inner {
+  animation: 1s fade;
+
+  @keyframes fade {
+    from {
+      opacity: .4
+    }
+
+    to {
+      opacity: 1
+    }
+  }
+}
+
 .snap-lightbox {
   /** Default lightbox to hidden */
   display: none;
@@ -180,6 +195,7 @@ $gap: var(--gap);
 // Position arrows for left/right
 .snap-prev {
   left: 0;
+
   .snap-lightbox & span {
     left: 0.5%;
   }
@@ -187,6 +203,7 @@ $gap: var(--gap);
 
 .snap-next {
   right: 0;
+
   .snap-lightbox & span {
     right: 0.5%;
   }

layouts/shortcodes/snap-gallery.html

@@ -39,7 +39,7 @@
 {{ else if eq $mode "slideshow" }}
 {{ partial "slideshow" (dict "imgs" $imgs "galno" $galno) }}
 {{/*  Set autorotate timer for slideshow  */}}
-<script>setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script>
+<script>const autoSlideshow = setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script>
 {{ end }}
 
 {{/*  The Modal/Lightbox  */}}

static/js/snap-gallery.js

@@ -27,6 +27,9 @@ function moveLightboxItem(id, n) {
 // Next/previous controls for slideshow
 function moveSlideshowItem(id, n) {
   showItem(slideshow_baseid, id, imageIndex[id] += n, ".snap-image");
+
+  // Kill automatic slideshow once the slideshow has been moved
+  clearInterval(autoSlideshow);
 }
 
 // In the slideshow or lightbox, make a specific image visible, make others hidden