Card-changer

Cards stack UI lib. No dependencies.

Check out a live demo

Usage

Install lib:

npm install card-changer

Make root container for card-changer:

<div id="root"></div>

Init card-changer:

import CardChanger from "card-changer";
 
const cardChanger = new CardChanger(document.querySelector("#root"), {
  cards: [
    {
      id: "card1",
      frontContent: "...", // HTML string or element with front card content
      backContent: "...", // HTML string or element with back card content
    },
    {
      id: "card2",
      frontContent: "...",
      backContent: "...",
    },
    // ...
  ],
  activeCardId: "card1",
  stackSize: 3,
  stackHeight: 40,
});
 
// Set active card
cardChanger.activeCardId = "card2";
 
// Rotate current card
cardChanger.rotate();
 
// Add handler on active card change
cardChanger.on("change", (activeCardId) => {
  console.log(`Active card id is "${activeCardId}"`);
});

API

Options

Option fields

Field	Type	Description
stackSize	Number	Amount of visible cards in stack
stackHeight	Number	Height of back cards area
rootClassName	String	Root class name for all generated sub-elements
dotsNavigation	Boolean	Show dots navigation
keepChangeOrder	Boolean	Cards change sequentially with animations for each
animationSpeed	Number	Animation speed for change one card (should be the same as CSS animation duration)
cards	Array	Array with cards object (see Card fields)
activeCardId	String	Card id that should be on top of the stack
unRotateOnChange	Boolean	Rotate to front card when it becomes inactive

Card fields

Field	Type	Description
id	String	card unique ID string
frontContent	String or HTMLElement	HTML content with the front side of the card
backContent	String or HTMLElement	HTML content with the back side of the card

Methods

• rotate() - rotate active card
• on(event, handler) - add handler for card-changer event
• off(event, handler) - remove handler for card-changer event

To set an active card id - assign it to activeCardId field:

cardChanger.activeCardId = "new_id";

Events

Field	Params	Description
change	activeCardId	fires on active card change

Examples

Check out an example code here

License

MIT