vue-card-stack

Install

npm install vue-card-stack

or

yarn add vue-card-stack

Usage

import Vue from "vue";
import VueCardStack from "vue-card-stack";

export default {
  components: {
    VueCardStack,
  },
  data() {
    return {
      cards: [
        { background: "#00659d" },
        { background: "#00abbc" },
        { background: "#e2c58a" },
        { background: "#fc8890" },
        { background: "#b35d7f" },
      ],
    };
  },
};

<vue-card-stack :cards="cards">
  <template v-slot:card="{ card }">
    <div
      :style="{ background: card.background }"
      style="width: 100%; height: 100%;"
    ></div>
  </template>
</vue-card-stack>

API

Props

| Name | Type | Default | Description | | :-------------------- | :---------------- | :-----------------------------: | :------------------------------------------------------------------------------------------------- | | cards | Array | [] | Array of cards to render stack. | | cardWidth | Number | 300 | Width of card in pixels. | | cardHeight | Number | 400 | Height of card in pixels. | | stackWidth | [Number:String] | cardWidth + paddingHorizontal | Width of card stack in pixels or as a percentage (responsive). | | sensitivity | Number | 0.25 | Distance card must travel as percentage of cardWidth + paddingHorizontal. | | maxVisibleCards | Number | 10 | Number of cards that will be visible at any one time. | | scaleMultiplier | Number | 0.75 | A number between 0 and 1 that determines how much a card scales as it moved through the stack. | | speed | Number | 0.2 | Duration in milliseconds for card swipe transition. | | paddingHorizontal | Number | 20 | A gutter size in pixels that will be applied to left and right hand side of card stack. | | paddingVertical | Number | 20 | A gutter size in pixels that will be applied to top and bottom of card stack. |

To help get you up and running quickly, most props are optional. To get started, simply provide an Array of cards to the component.

Events

| Name | Attributes | Listen to | Description | | :------- | :--------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | move | (value) | @move | Emitted as card position changes. Value represents distance card has moved as a value between 0 and 1 values below 0 and above 1 are returned if card is moved beyond min and max distances. |

Slots

| Name | Description | | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | card | Slot for individual card in stack. | | nav | Slot for controlling navigation of card stack.activeCardIndex - returrns current card index.onNext - method to move forwards though stack.onPrevious - method to move backwards though stack. |

Docs

See the full api docs and examples here: https://rodleviton.github.io/vue-card-stack/

Examples

https://reactivepixels.com/rodleviton/pixels/EXi4DocHUfMi3FHpnLT7

License

MIT