Vue.js Swipe Component.
VSwipe.js
Use this Vue Swipe Component to create sliders following a simple pattern.
Brad Birdsall's Swipe.js as a Vue component.
Take a look at the Demo.
Example
Install
npm i vswipe -S
import Vue from 'vue'
import VSwipe from 'vswipe'
Vue.use(VSwipe)
if you include vswipe.js by a <script>
tag, you can use it directly.
Usage
*.vue
<template>
<div id="app">
<swipe ref="mySwipe" style='max-width:500px;margin:0 auto'>
<swipe-item><b>0</b></swipe-item>
<swipe-item><b>1</b></swipe-item>
<swipe-item><b>2</b></swipe-item>
<swipe-item><b>3</b></swipe-item>
<swipe-item><b>4</b></swipe-item>
<swipe-item><b>5</b></swipe-item>
</swipe>
<button @click="next" class="btn btn-default">Previous</button>
<button @click="prev" class="btn btn-default">Next</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
swipeOptions: {
startSlide: 0,
speed: 300,
auto: 4000,
continuous: true,
disableScroll: false,
stopPropagation: false
}
},
methods: {
prev() {
this.$refs.mySwipe.prev()
},
next() {
this.$refs.mySwipe.next()
}
}
}
Find VSwipe.js on Github.