pinch-slider
v0.2.7
Published
a slider for images which can be zoomed or pinched
Downloads
66
Maintainers
Readme
Overview
pinch-slider is a touch slider for which can be zoomed or pinched for vue.js.
Install
$ npm install pinch-slider
Import using module
Import components to your project:
require('pinch-slider/dist/pinch-slider.css');
// in ES6 modules
import { PinchSlider, AlloyFinger, AlloyFingerVue } from 'pinch-slider';
// in CommonJS
const { PinchSlider, AlloyFinger, AlloyFingerVue } = require('pinch-slider');
// in Global variable
const { PinchSlider, AlloyFinger, AlloyFingerVue } = PinchSlider;
And register components:
Vue.use( AlloyFingerVue, { AlloyFinger: AlloyFinger }); // use AlloyFinger's plugin
Vue.component('pinch-slider', PinchSlider);
Import using script tag
<link rel="stylesheet" href="../node-modules/pinch-slider/dist/pinch-slider.css" charset="utf-8">
<script src="../node-modules/pinch-slider/dist/pinch-slider.js"></script>
const { PinchSlider, AlloyFinger, AlloyFingerVue } = PinchSlider;
Vue.use( AlloyFingerVue, { AlloyFinger: AlloyFinger }); // use AlloyFinger's plugin
Vue.component('pinchSlider', PinchSlider);
new Vue({
el: '.vue-wrapper',
data: {
imgs: [
{ src: 'https://cdn.pixabay.com/photo/2016/11/07/05/13/map-1804891__480.jpg' },
{ src: 'https://cdn.pixabay.com/photo/2016/12/09/08/09/texture-1893788__480.jpg' },
{src:'https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__480.jpg'}
],
currentIndex: 0,
isFull:false
},
methods:{
showFull() {
this.isFull = true;
},
changePageNo(data) {
this.currentIndex = data.index;
}
}
});
Usage
Work on a Vue instance:
<div class="slider-container">
<pinch-slider :slides="imgs" :enable-pinch="false" :current-index='currentIndex' @on-slide-change="changePageNo" @on-img-click="showFull">
</pinch-slider>
</div>
.slider-container {
width: 100%;
height: 500px;
overflow: hidden;
}
Options
Here list Props and events on the component
| Option | Description | | ----- | ----- | | slides | Array(default: []) image lists to be loaded. | | enablePinch | Boolean(default: true). | | currentIndex | Number (default:0) - current image showing | | srcKey | String (default:'src') - key for the slider object which contains the image. | | lazyLoad | Boolean (default:false) - if true, the images won't be downloaded until swiped near to them. | | loadingImgUrl | String (default:'') - if lazyLoad, the loading image shown before the real image downloaded. | | @on-slide-change | function - trigged when the slider changes, passes current index for the callback | | @on-img-click | function - trigged when image be clicked, this event cancels bubble|
Develop
$ npm run build
Many thanks to
License
MIT