https://github.com/eshengsky/vue-card-swipe

A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.
https://github.com/eshengsky/vue-card-swipe

vue-component vue-slider vue-slider-component vue-swipe vue-swiper vue-swiper-component

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/eshengsky/vue-card-swipe
• Owner: eshengsky
• License: mit
• Created: 2019-10-18T02:56:10.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T06:15:53.000Z (about 2 years ago)
• Last Synced: 2024-04-25T13:02:41.088Z (8 months ago)
• Topics: vue-component, vue-slider, vue-slider-component, vue-swipe, vue-swiper, vue-swiper-component
• Language: Vue
• Homepage: https://codesandbox.io/s/vue-card-swipe-demo-jl77r
• Size: 2.88 MB
• Stars: 29
• Watchers: 3
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## vue-card-swipe

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

![preview](./preview.gif)

### Online Demo

[![Edit vue-card-swipe demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-card-swipe-demo-jl77r?fontsize=14)

### Install

```bash

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

```

### Import

#### using module

```javascript

// ES6 modules

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

// or CommonJS

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

```

#### using script tag

```html

```

```javascript

const { CardSwipe, CardSwipeItem } = window.VueCardSwipe;

```

Then register the components:

```js

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

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

```

### Usage

```html

  

    
1

  

  

    
2

  

  

    
3

  


```

### 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`

```javascript

this.$refs.myCardSwipe.currentIndex;

```

### Build

```bash

$ npm run build

```

### Test

```bash

$ npm test

```

### License

MIT