add slideshow functionality, adapt JS, adapt CSS

assets/scss/snap-gallery.scss

@@ -1,15 +1,14 @@
-.snap-gallery-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
+$gap: var(--gap);
+
+.snap-gallery-wrapper, .snap-slideshow-wrapper {
+  margin-bottom: $gap;
 
   /* Create equal columns in flexbox */
   .snap-image {
     cursor: pointer;
 
     /* Column amount and width are configurable by style variables */
-    width: calc(100% / var(--columns) - 10px);
+    width: calc(100% / var(--columns) - #{$gap});
     min-width: var(--min-width);
 
     img {
@@ -20,6 +19,21 @@
   }
 }
 
+.snap-gallery-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: $gap;
+}
+
+.snap-slideshow-wrapper {
+
+  // Hide all contained images except the first
+  .snap-image:not(:first-child) {
+    display: none;
+  }
+}
+
 .snap-lightbox {
   /** Default lightbox to hidden */
   display: none;