Awesome

vue-card-swipe

A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.

preview

Online Demo

Install

$ npm i --save @eshengsky/vue-card-swipe

Import

using module

// ES6 modules
import { CardSwipe, CardSwipeItem } from '@eshengsky/vue-card-swipe';

// or CommonJS
const { CardSwipe, CardSwipeItem } = require('@eshengsky/vue-card-swipe');

using script tag

<script src="./node_modules/@eshengsky/vue-card-swipe/dist/vue-card-swipe.min.js"></script>

const { CardSwipe, CardSwipeItem } = window.VueCardSwipe;

Then register the components:

Vue.component('card-swipe', CardSwipe);
Vue.component('card-swipe-item', CardSwipeItem);

Usage

<card-swipe>
  <card-swipe-item>
    <div style="background-image: linear-gradient(to right, #fe686c 0%, #fe3c71 100%)">1</div>
  </card-swipe-item>
  <card-swipe-item>
    <div style="background-image: linear-gradient(to right, #ffaa00 0%, #ff8800 100%);">2</div>
  </card-swipe-item>
  <card-swipe-item>
    <div style="background-image: linear-gradient(to right, #add0f8 0%, #5ca2f8 100%);">3</div>
  </card-swipe-item>
</card-swipe>

Props

Property	Description	Type	Default
stack	Card stacking direction, `left`: stack to the left, `right`: stack to the right, `center`: stack left and right	`String`	center
max-distance	The maximum drag distance, less than the distance card recovery, greater than the distance swipe to the next card, the unit `px`	`Number`	60
ratio	The aspect ratio of the first card	`Number`	2
show-indicators	Whether to show the indicators	`Boolean`	true

Event

Event	Description	Params
resume	trigger when card recovery (Card drag distance is less than `max-distance`)	`index` Current card index, starting from `1`
change	trigger when swipe to the next card (Card drag distance is greater than `max-distance`)	`lastIndex` Previous card index, `index` Current card index, starting from `1`

Instance Property

currentIndex

Get the index of the current card, starting with 1

this.$refs.myCardSwipe.currentIndex;

Build

$ npm run build

Test

$ npm test

License

MIT