vue-swipe

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

Install

$ npm install h3nr1ke-vueswipe

Import

Import using module

Import components to your project:

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

// in ES6 modules
import { Swipe, SwipeItem } from 'h3nr1ke-vueswipe';

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

// 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
indicatorClass	String	an extra class to be added in the indicators	""
showArrows	Boolean	Show lateral centered arrows	false
leftArrow	String	image to be displayed as left arrow	the char "<"
leftArrowClass	String	text for alt property	""
leftArrowTitle	String	an extra class in the left arrow wrapper element	""
rightArrow	String	image to be displayed as right arrow	the char ">"
rightArrowClass	String	an extra class in the right arrow wrapper element	""
rightArrowTitle	String	text for alt property	""
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
disabledClickIndicator	Boolean	disabled user click in the indicators	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