A Vue Swipe Component.
JavaScript Vue HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build v0.1.0 Mar 12, 2017
config reset demo static files Mar 16, 2017
demo v1.0.1 dynamic swipe items Mar 29, 2017
dist v1.0.1 dynamic swipe items Mar 29, 2017
docs update DEMO Mar 29, 2017
examples update README Mar 12, 2017
src v1.0.1 dynamic swipe items Mar 29, 2017
static init Mar 8, 2017
.babelrc init Mar 8, 2017
.editorconfig init Mar 8, 2017
.eslintignore init Mar 8, 2017
.eslintrc.js init Mar 8, 2017
.gitignore remove .npmrc Mar 12, 2017
.postcssrc.js init Mar 8, 2017
README.md v1.0.0 Mar 19, 2017
index.html scrolling content in a swipe item Mar 15, 2017
package.json v1.0.1 dynamic swipe items Mar 29, 2017
yarn.lock init Mar 8, 2017

README.md

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