https://github.com/katik/pinch-slider
a vue based mobile slider(or swiper) for images which can be zoomed or pinched
https://github.com/katik/pinch-slider
pinch slider touch vue zoom
Last synced: 1 day ago
JSON representation
a vue based mobile slider(or swiper) for images which can be zoomed or pinched
- Host: GitHub
- URL: https://github.com/katik/pinch-slider
- Owner: katik
- Created: 2017-01-04T12:55:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-22T08:50:16.000Z (over 8 years ago)
- Last Synced: 2024-06-11T13:47:13.695Z (over 1 year ago)
- Topics: pinch, slider, touch, vue, zoom
- Language: JavaScript
- Homepage:
- Size: 229 KB
- Stars: 5
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
- awesome-vue-refactor - pinch-slider
README
# Overview
pinch-slider is a touch slider for which can be zoomed or pinched for vue.js.
# Install
```bash
$ npm install pinch-slider
```
## Import using module
Import components to your project:
```JavaScript
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:
```javascript
Vue.use( AlloyFingerVue, { AlloyFinger: AlloyFinger }); // use AlloyFinger's plugin
Vue.component('pinch-slider', PinchSlider);
```
## Import using script tag
``` HTML
```
```JavaScript
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:
```HTML
```
```CSS
.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
```bash
$ npm run build
```
# Many thanks to
[AlloyFinger](https://github.com/AlloyTeam/AlloyFinger)
# License
MIT