A Slick Lightbox Gallery Component for Vue.js

vue-tinybox is a neat but very small lightbox gallery component for Vue.js applications.

slick slider, slick lightbox example, slick slider using javascript, gallery slick slider, slick slider in popup, slick slider with thumbnails and lightbox

spot. There is no excessive design. Pictures, thumbnails, controls.
Too small. free of dependency. 3 KB minified and compressed.
adaptation. It works on computers. It works on tablets. It works on phones.

Full-Featured Lightbox Gallery With Pure JavaScript | lightgallery.js

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-tinybox

# NPM
$ npm install vue-tinybox --save

1. Install and import the vue-tinybox component.

import Tinybox from "vue-tinybox";

2. Register the component.

Vue.component('Tinybox', Tinybox);
//or
Vue.use(Tinybox);
//or
new Vue({
    components: { Tinybox },
    // ... 
});

3. Create the lightbox component on the template.

<Tinybox v-model="index" :images="images"></Tinybox>
<img
  v-for="(img, idx) in images"
  :src="img.thumbnail"
  :alt="img.alt"
  class="open-tinybox"
  @click="index = idx"
>

new Vue({
    components: { Tinybox },
    el: '#demo-app',
    data: function () {
      return {
        images: [
          {
            src: "1.jpg",
            alt: "Alt 1",
            thumbnail: "thumb-1.jpg"
          },
          {
            src: "2.jpg",
            alt: "Alt 2",
            thumbnail: "thumb-3.jpg"
          },{
            src: "3.jpg",
            alt: "Alt 3",
            thumbnail: "thumb-3.jpg"
          }
        ],
        index: null
      }
    }

Slick Lightbox Component, vue-tinybox Plugin/Github