vue-snap-gallery
Image slider using css snap-scroll
Usage
run:
npm i --save @nerdcel/vue-snap-gallery
or
yarn add @nerdcel/vue-snap-gallery
In your Vue main.js:
import Vue from 'vue';
import SnapGallery from '@nerdcel/vue-snap-gallery';
Vue.use(SnapGallery);
In your template
<snap-gallery :srcset="[{src: '...'}, {...}]"
gap="3"
:event="customEvent"
ref="gallery"
:autoplay="true"
interval="3000"
delay="5000"
/>
Component Properties
Name | Description |
---|---|
srcset | [{src: '...'}, {...}] |
gap | Defines gap between images (x * 10px) |
event | Custom click event on image. |
(index, img) => { ...doStuff } |
|
ref | To call methods from outside, |
e.g this.$refs.gallery.goTo(2) | |
autoplay |
true or false
|
interval | Autoplay interval in ms. E.g. 3000 |
delay | Delay for paused autoplay in ms. |
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint
Jest Unit test
yarn test:unit