update

components/GalleryPage.vue

@@ -79,6 +79,10 @@ export default {
       left: 0;
     }
 
+    .gallery__featured {
+      width: 100vw;
+    }
+
   .close-viewer {
     font-size: 10em;
     cursor: pointer;

components/GalleryThumbs.vue

@@ -7,10 +7,13 @@
         <ul class="gallery-thumbs__row">
           <li class="featured-image mobile-only"
               :style="{ 'height': featuredHeight }">
+            <ThumbNav direction="right" />
           </li>
           <li v-for="image in gallery.images"
               class="thumb-container"
               :key="image.url">
+            <ThumbNav direction="left" />
+            <ThumbNav direction="right" />
             <span>{{ image.thumbUrl }}</span>
           </li>
         </ul>
@@ -20,8 +23,11 @@
 </template>
 
 <script>
+import ThumbNav from '@/components/ThumbNav'
+
 export default {
   components: {
+    ThumbNav
   },
   
   props: {
@@ -37,9 +43,14 @@ export default {
 
   data () {
     return {
+      activeThumbIndices: []
     }
   },
 
+  mounted () {
+    console.log('mounted')
+  },
+
   methods: {
     slideRight(index) {
       console.log('slideRight: ', index)
@@ -83,6 +94,7 @@ export default {
 
   .thumb-container {
     height: 50vh;
+    width: 100vw;
   }
 }
 
@@ -110,6 +122,10 @@ export default {
   .gallery-thumbs__row {
     flex: 0 0 $thumbs-height;
   }
+
+  .thumb-nav {
+    display: none;
+  }
 }
 
 </style>

components/ThumbNav.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>ThumbNav--{{ direction }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    direction: {
+      type: String,
+      default: function () {
+        return 'right'
+      }
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>