Negatory. Postpone Mission.

    card-changer

    0.1.2 • Public • Published

    Card-changer

    Cards stack UI lib. No dependencies.

    Check out a live demo

    Preview

    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

    Keywords

    none

    Install

    npm i card-changer

    DownloadsWeekly Downloads

    3

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    64.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • carcinogen75