refactor: ♻️ update gallery component

src/components/Gallery.vue

@@ -1,14 +1,35 @@
 <template>
   <div class="gallery">
-    <div class="gallery__bigimage">
-      <figure class="gallery__imagecontainer">
-        <img :src="bigImage" alt="" />
-        <figcaption>
-          {{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
-        </figcaption>
-      </figure>
+    <div class="gallery__images">
+      <a
+        href="#"
+        class="gallery__prev"
+        @click.prevent="prev()"
+        v-show="activeImage > 0"
+      ></a>
+      <a
+        href="#"
+        class="gallery__next"
+        @click.prevent="next()"
+        v-show="activeImage < images.length - 1"
+      ></a>
+
+      <div class="gallery__viewport" :style="offset">
+        <slot></slot>
+      </div>
     </div>
-    <slot></slot>
+
+    <nav class="gallery__navigation">
+      <ul>
+        <li v-for="(image, idx) in images" :key="idx">
+          <a
+            href="#"
+            :class="{ active: activeImage === idx }"
+            @click.prevent="setActive(idx)"
+          ></a>
+        </li>
+      </ul>
+    </nav>
   </div>
 </template>
 
@@ -17,27 +38,33 @@ export default {
   name: "gallery",
   data() {
     return {
-      bigImage: "",
+      activeImage: 0,
       images: []
     };
   },
+  computed: {
+    offset() {
+      return `margin-left: -${this.activeImage * 100}vw`;
+    }
+  },
   methods: {
-    setBigImage(index) {
-      this.bigImage = this.images[index];
+    setActive(index) {
+      this.activeImage = index;
+    },
+    prev() {
+      if (this.activeImage > 0) {
+        this.activeImage -= 1;
+      }
+    },
+    next() {
+      if (this.activeImage < this.images.length - 1) {
+        this.activeImage += 1;
+      }
     }
   },
   mounted() {
-    const images = Array.from(this.$el.querySelectorAll("li img"));
-
-    images.forEach((img, idx) => {
-      img.addEventListener("click", e => {
-        e.preventDefault();
-        this.setBigImage(idx);
-      });
-    });
-
-    this.images = images.map(img => img.src);
-    this.bigImage = images[0].src;
+    const images = Array.from(this.$el.querySelectorAll("img"));
+    this.images = images;
   }
 };
 </script>
@@ -47,86 +74,115 @@ export default {
 @import "@scss/_mixins.scss";
 
 .gallery {
-  margin: auto;
+  &__prev,
+  &__next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
 
-  @include mq-desktop {
-    max-width: 70em;
+    width: 1em;
+    height: 1em;
+
+    border: {
+      top: 0.125em solid #fff;
+      right: 0.125em solid #fff;
+    }
+
+    @include mq-desktop {
+      width: 1.5em;
+      height: 1.5em;
+    }
   }
 
-  &__bigimage {
-    width: 100%;
-    height: 40vh;
+  &__prev {
+    left: 1em;
+    transform: rotate(-135deg);
+  }
+
+  &__next {
+    right: 1em;
+    transform: rotate(45deg);
+  }
+
+  &__images {
+    position: relative;
+    overflow: hidden;
+    height: 50vh;
 
     @include mq-desktop {
       height: 80vh;
     }
-
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-
-    background-color: $copy-color-darkgrey;
-
-    overflow: hidden;
   }
 
-  &__imagecontainer {
-    position: relative;
-    margin: 0;
+  &__viewport {
+    display: flex;
+    flex-flow: row nowrap;
+
     width: 100%;
     height: 100%;
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    box-shadow: inset 0 0 15em #000;
+
+    transition: 0.3s all ease-in-out;
+
+    figure {
+      flex: 0 0 100%;
+
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+
+      width: 100vw;
+      margin: 0;
+      padding: 0 2em;
+
+      @include mq-desktop {
+        padding: 0 2.5em;
+      }
+    }
 
     img {
-      align-self: center;
       max-width: 100%;
-      max-height: 100%;
+      max-height: 90%;
+      object-fit: contain;
     }
 
     figcaption {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: rgba(#000, 0.5);
-      color: $copy-color;
+      flex: 0 0 100%;
       text-align: center;
     }
   }
 
-  ul {
+  &__navigation {
     display: flex;
-    list-style: none;
-    height: 6.5em;
-    margin: 0;
-    padding: 0.5em;
-    overflow-x: scroll;
-    background-color: $copy-color-darkgrey;
-  }
+    flex-flow: row wrap;
+    justify-content: center;
 
-  li {
-    flex: 1 0 auto;
-    text-align: center;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
+    ul {
+      flex: 0 1 auto;
 
-    & + li {
-      margin-left: 0.5em;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+
+      list-style: none;
+      margin: 1em 0;
+      padding: 0;
     }
 
-    img {
-      cursor: pointer;
-      border: 0.25em solid #fff;
-      align-self: center;
-      max-width: 100%;
-      max-height: 100%;
+    li {
+      flex: 0 1 auto;
+      padding: 0.375em;
+
+      a {
+        display: block;
+        width: 0.5em;
+        height: 0.5em;
+        border-radius: 1em;
+        background: rgba(#fff, 0.5);
+
+        &.active {
+          background: #fff;
+        }
+      }
     }
   }
 }