Neapolitan Pizza Margherita

    @eshengsky/vue-card-swipe

    1.0.2 • Public • Published

    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

    Edit vue-card-swipe 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

    Install

    npm i @eshengsky/vue-card-swipe

    DownloadsWeekly Downloads

    16

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    2.61 MB

    Total Files

    13

    Last publish

    Collaborators

    • eshengsky