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.