Skip to content

rodleviton/vue-card-stack

Repository files navigation

Project Status: 🚨 Unmaintained 🚨

This project is no longer actively maintained. I will not be accepting pull requests, addressing issues, nor making future releases. I have plans to revisit this project in the future but it will likely become a multi-framework project under a different repo name. 🕊️

Vue Card Stack Logo

vue-card-stack

CI GitHub license Mentioned in Awesome Awesome Vue

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://www.rodleviton.com/pixels/vue-card-stack

License

MIT