VSwipe.js

Brad Birdsall's Swipe.js as a Vue 2.0 component.

Demo

https://wangdahoo.github.io/vswipe/

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

VSwipe only need a simple pattern too. Here's an example:

<swipe>
  <swipe-item><b>0</b></swipe-item>
  <swipe-item><b>1</b></swipe-item>
  <swipe-item><b>2</b></swipe-item>
</swipe>

Config Options

• startSlide Integer (default:0) - index position Swipe should start at

• speed Integer (default:300) - speed of prev and next transitions in milliseconds.

• auto Integer - begin with auto slideshow (time in milliseconds between slides)

• continuous Boolean (default:true) - create an infinite feel with no endpoints

• disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page

• stopPropagation Boolean (default:false) - stop event propagation

• callback Function - runs at slide change.

• transitionEnd Function - runs at the end slide transition.

Example

<swipe :options="swipeOptions">
  <swipe-item><b>0</b></swipe-item>
  <swipe-item><b>1</b></swipe-item>
  <swipe-item><b>2</b></swipe-item>
</swipe>
<script>
  export default {
    data () {
      return {
        swipeOptions: {
          startSlide: 0,
          speed: 300,
          auto: 4000,
          continuous: true,
          disableScroll: false,
          stopPropagation: false,
          callback: function (index, slide) { console.log('slide changes') },
          transitionEnd: function (index, slide) { console.log('slide transition ends') }
        }
      }
    }
  }
</script>

Or check this out: https://github.com/wangdahoo/vswipe/blob/master/examples/index.html

VSwipe instance API

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

License

MIT