v-viewer

HTML

<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="//unpkg.com/v-viewer/dist/v-viewer.js"></script>
<div id="app">
    <h3>Component</h3>
    <div>
      <viewer :options="options" :images="images"
            @inited="inited"
            class="viewer list-img" ref="viewer">
        <template slot-scope="scope">
          <img v-for="src in scope.images" :src="src" :key="src">
        </template>
      </viewer>
    </div>
     <br>
    <button type="button" @click="full">Full Screen</button>
</div>

SCSS

.list-img {
  height: 300px;
}
.list-img img {
  width: 20%;
  cursor: pointer;
  margin-right: 5px;
}

.list-img img.small {
   width: 10%;
}

JavaScript

Vue.use(VueViewer.default)

new Vue({
	el: '#app',
  methods: {
  	inited (viewer) {
      this.$viewer = viewer;
    },
    full () {
      this.$viewer.full();
    }
  },
  data() {
    return {
			images: [
      	'https://picsum.photos/id/250/400/400',
        'https://picsum.photos/id/251/400/400',
        'https://picsum.photos/id/252/400/400',
        'https://picsum.photos/id/253/400/400'
      ],
      options: {
        inline: true,
        button: false,
        navbar: true,
        title: 2,  // show if screen > 768px
        toolbar: {
          zoomIn: 2,
          zoomOut: 2,
          oneToOne: 2,
          reset: 2,
          prev: 1,
          play: {
            show: 1,
            size: 'large',
          },
          next: 1,
          rotateLeft: 2,
          rotateRight: 2,
          flipHorizontal: 2,
          flipVertical: 2,
        },
        tooltip: true,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        transition: true,
        fullscreen: true,
        keyboard: true,
      },
    }
  }
});