ZhangHuay/vue-card-swipe

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

vue-card-swipe

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

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