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