react-flipping-cards

React adapter for Flipping Cards Carousel

Flipping Cards Carousel GitHub repository

Usage

Install the package using npm:

npm install react-flipping-cards --save

Import component:

import FlippingCards from "react-flipping-cards";

Configuration

Set configuration of the carousel. For example:

var configuration = {
    autoFlipMode: false,
    autoFlipDelay: 1500,
    pauseMouseOver: true,
 
    displayShadow: true,
    transitionDuration: 700,
 
    rotationMode: "simultaneous",
    sequentialDelay: 600,
 
    cardWidth: 150,
    cardHeight: 180,
 
    spacingHorizontal: 15,
    spacingVertical: 15,
 
    cardsToShow: 3,
    cardsPerRow: 3,
 
    startFromIndex: 1
};

Content

Set content of the cards of the carousel. For example:

var content = [
    '<div>Lorem ipsum 1</div>',
    '<div>Lorem ipsum 2</div>',
    '<div>Lorem ipsum 3</div>',
    ...
 ];

Use Flipping Cards Carouser React adapter:

  <FlippingCards id="flipping_cards" configuration={configuration} content={content} />

License

MIT