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

AlloyFinger

License

MIT

Minimal Touch Slider For Vue.js – pinch-slider