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>Directive</h3>
    <div class="images list-img" v-viewer="options">
      <img src="https://picsum.photos/id/237/400/400">
      <img src="https://picsum.photos/id/238/400/400">
      <img src="https://picsum.photos/id/239/400/400">
      <img src="https://picsum.photos/id/240/400/400">
    </div>
    <button type="button" @click="show">Show</button>
</div>

SCSS

.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: {
  	show () {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
    }
  },
  data() {
    return {
      options: {
        inline: false,
        button: true,
        navbar: true,
        title: 2,  // show if screen > 768px
        toolbar: {
          zoomIn: 1,
          zoomOut: 1,
          oneToOne: 1,
          reset: 1,
          prev: 1,
          play: {
            show: 1,
            size: 'large',
          },
          next: 1,
          rotateLeft: 1,
          rotateRight: 1,
          flipHorizontal: 1,
          flipVertical: 1,
        },
        tooltip: true,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        transition: true,
        fullscreen: true,
        keyboard: true,
      },
    }
  }
});