Package Exports

vue-gallery-slideshow

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-gallery-slideshow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm

vue-gallery-slideshow

Lightweight and responsive image gallery for Vue.js.

Live Demo

https://jsfiddle.net/headione/szk73x45/show/

Installation

By CDN

<script src="https://unpkg.com/vue-gallery-slideshow"></script>

By package manager

npm install vue-gallery-slideshow

yarn add vue-gallery-slideshow

Usage

HTML

<div id="app">
  <img class="image" v-for="(image, i) in images" :src="image" :key="i" @click="index = i">
  <vue-gallery-slideshow :images="images" :index="index" @close="index = null"></vue-gallery-slideshow>
</div>

JavaScript

import VueGallerySlideshow from 'vue-gallery-slideshow';

const app = new Vue({
  el: '#app',
  components: {
    VueGallerySlideshow
  },
  data: {
    images: [
      'https://placekitten.com/801/800',
      'https://placekitten.com/802/800',
      'https://placekitten.com/803/800',
      'https://placekitten.com/804/800',
      'https://placekitten.com/805/800',
      'https://placekitten.com/806/800',
      'https://placekitten.com/807/800',
      'https://placekitten.com/808/800',
      'https://placekitten.com/809/800',
      'https://placekitten.com/810/800'
    ],
    index: null
  }
});

Options

Adding alt text

If you want to add alt tags to the images, you can do by wrapping it in an object and adding an alt property:

images: [
   { url: 'https://placem.at/places?w=800&h=600&random=1', alt:'My alt text' },
   ...
]

Usage with Nuxt.js

When used with server-side rendering frameworks like Nuxt.js, please wrap the component in a <client-only> element like shown below:

...
<img class="image" v-for="(image, i) in images" :src="image" :key="i" @click="index = i">
<client-only placeholder="Loading...">
  <vgs :images="images" :index="index" @close="index = null" />
</client-only>
...

Contributing

Please refer to each project's style guidelines and guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

Fork the repo on GitHub
Clone the project to your machine
Commit changes to your branch
Push your work back up to your fork
Submit a Pull request so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Author

Norman Sander

License

vue-gallery-slideshow is available under the MIT license. See the LICENSE file for more info.