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:
Init card-changer:
; const cardChanger = document 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 cardcardChangeractiveCardId = "card2"; // Rotate current cardcardChanger; // Add handler on active card changecardChanger;
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 cardon(event, handler)
- add handler for card-changer eventoff(event, handler)
- remove handler for card-changer event
To set an active card id - assign it to activeCardId
field:
cardChangeractiveCardId = "new_id";
Events
Field | Params | Description |
---|---|---|
change | activeCardId | fires on active card change |
Examples
Check out an example code here
License
MIT