A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.
$ npm i --save @eshengsky/vue-card-swipe// ES6 modules
import { CardSwipe, CardSwipeItem } from '@eshengsky/vue-card-swipe';
// or CommonJS
const { CardSwipe, CardSwipeItem } = require('@eshengsky/vue-card-swipe');<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);<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>| 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 | 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 |
Get the index of the current card, starting with 1
this.$refs.myCardSwipe.currentIndex;$ npm run build$ npm testMIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent