Card-flick NPM

Card-Flick - A lightweight JavaScript library for creating a card swipe UI effect

Card-Flick is a lightweight JavaScript library for creating a card swipe user interface (UI) effect in web applications. The library allows users to interact with a stack of cards by flicking them left or right on touch-enabled devices or by using the mouse on desktop computers.

React version

use the react version of this library card-flick-react

Features

Simple and lightweight library for creating a card swipe UI effect. Supports touch events for mobile devices and mouse events for desktop computers. Easily customizable through CSS and JavaScript. Works in all modern browsers. Open-source under the MIT license.

Installation

To install Card-Flick, simply run the following command:

npm install card-flick

Alternatively, you can download the latest version from the GitHub repository.

Usage

To use Card-Flick in your web application, first, create a container element that contains the cards you want to swipe. Then, you have two options:

Use the already bundled files in the dist folder.
Use a module bundler like Webpack or Browserify to build the library from the source files in the src folder.

Using the bundled files

To use this option, you need to include the JavaScript file in your HTML document and initialize the library on a container element that contains the cards you want to swipe. Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <title>My Card-Flick App</title>
        <link rel="stylesheet" href="path/to/card-flick.css" />
    </head>
    <body>
        <div id="card-container">
            <div class="card">Card 1</div>
            <div class="card">Card 2</div>
            <div class="card">Card 3</div>
            <!-- add more cards here -->
        </div>
        <script src="./node_modules/card-flick/dist/card-flick.js"></script>
        <script>
            var cardContainer = document.getElementById('card-container')
            var cards = document.querySelectorAll('.card')

            var cardFlick = new CardFlick(cardContainer, cards)
        </script>
    </body>
</html>

Load with module bundler

If you're using a module bundler like Webpack or Rollup, you can load Card-Flick as a module:

import CardFlick from 'card-flick'

const cardContainer = document.querySelector('#card-container')
const cards = document.querySelectorAll('.card')

const cardFlick = new CardFlick(cardContainer, cards)

Customize options

You can customize the behavior of Card-Flick by passing options to the CardFlick constructor. Here's an example:

import CardFlick from 'Card-Flick'

const cardContainer = document.querySelector('#card-container')
const cards = document.querySelectorAll('.card')

const cardFlick = new CardFlick(cardContainer, cards, {
    swipeThreshold: 50,
    transitionDuration: 300,
    onSwipe: function (direction, card) {
        console.log('Card swiped', direction, card)
    },
})

Options

Option	Type	Default	Description
swipeThreshold	number	100	The minimum distance the card needs to be swiped before it is removed from the stack.
notAligned	boolean	false	If true, the cards are not aligned when they are added to the stack.
transitionDuration	number	500	The duration of the transition when a card is removed from the stack.
onSwipeLeft	function	null	A callback function that is called when a card is swiped left.
onSwipeRight	function	null	A callback function that is called when a card is swiped right.
onSwipe	function	null	A callback function that is called every time a card is swiped.