Skip to content

Latest commit

 

History

History
144 lines (104 loc) · 2.65 KB

README.md

File metadata and controls

144 lines (104 loc) · 2.65 KB
Raw

vue-swipe

vue-swipe is a touch slider for Vue.js.

Install

$ npm install vue-swipe

Import

Import using module

Import components to your project:

require('vue-swipe/dist/vue-swipe.css');

// in ES6 modules
import { Swipe, SwipeItem } from 'vue-swipe';

// in CommonJS
const { Swipe, SwipeItem } = require('vue-swipe');

// in Global variable
const { Swipe, SwipeItem } = VueSwipe;

And register components:

Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

Import using script tag

<link rel="stylesheet" href="../node-modules/vue-swipe/dist/vue-swipe.css" charset="utf-8">
<script src="../node-modules/vue-swipe/dist/vue-swipe.js"></script>
const vueSwipe = VueSwipe.Swipe;
const vueSwipeItem = VueSwipe.SwipeItem;

new Vue({
  el: 'body',
  components: {
    'swipe': vueSwipe,
    'swipe-item': vueSwipeItem
  }
});

Usage

Work on a Vue instance:

<swipe class="my-swipe">
  <swipe-item class="slide1"></swipe-item>
  <swipe-item class="slide2"></swipe-item>
  <swipe-item class="slide3"></swipe-item>
</swipe>
.my-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.slide1 {
  background-color: #0089dc;
  color: #fff;
}

.slide2 {
  background-color: #ffd705;
  color: #000;
}

.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}

Options

Props

Option Type Description Default
speed Number Speed of animation 300
defaultIndex Number Start swipe item index 0
disabled Boolean Disable user drag swipe item false
auto Number Delay of auto slide 3000
continuous Boolean Create an infinite slider without endpoints true
showIndicators Boolean Show indicators on slider bottom true
noDragWhenSingle Boolean Do not drag when there is only one swipe-item true
prevent Boolean preventDefault when touch start, useful for some lower version Android Browser (4.2, etc) false
propagation Boolean solve nesting false
disabled Boolean disabled user swipe item false

Events

Event Name Description params
change triggers when current swipe-item change new swipe item Index, old swipe item Index

FAQ

How to programminly swipe to an item?

Use ref and call goto() method.

this.$refs.swipe.goto(newIndex)

For more details, please refer to example code.

Development

Watching with hot-reload:

$ npm run dev

Develop on real remote device:

$ npm run remote-dev {{ YOUR IP ADDRESS }}

License

MIT