react-card-stack-carousel

Stacked card carousal component with configurable 3D transition effect.

Demo

Getting started

Install react-card-stack-carousel from NPM

npm i react-card-stack-carousel

# OR

yarn add react-card-stack-carousel

Import react-card-stack-carousel styles

// import base styles at the top of your component
import "react-card-stack-carousel/styles/styles.css";

Usage

NOTE: StackedCarousel requires a height property to be specified

import React from "react";
import { StackedCarousel } from "react-card-stack-carousel";
import "react-card-stack-carousel/styles/styles.css"; // import base styles

export default function App() {
    // specify container height
    const containerHeight = 250;

    return (
        <main className="container">
            <StackedCarousel height={containerHeight}>
                <div className="sample-card bg-color-1">0</div>
                <div className="sample-card bg-color-2">1</div>
                <div className="sample-card bg-color-3">2</div>
            </StackedCarousel>
        </main>
    );
}

Responsive height

Height prop supports Tailwind CSS based breakpoint system to accommodate responsive design. To specify a height at a certain breakpoint, prefix the breakpoint name, followed by the ":" character.

<!-- 200px on mobile (default), 500px on medium screens and 750px on large screens -->
<StackedCarousel height="200 md:500 lg:750">{...}</StackedCarousel>

Visit responsive-design for the exhaustive list of supported breakpoints.

Props

| Prop | Type | Default | Required | Description | | -------------------- | ---------------- | ------------------------------------ | -------- | ------------------------------------------------- | | height | number or string | - | Yes | Height of the carousel. | | children | ReactNode | - | Yes | Children nodes of the carousel. | | autoplay | boolean | false | No | Automatically transition between items. | | autoplayInterval | number | 4000 | No | Interval between automatic transitions. | | easingFunction | string | cubic-bezier(0.93, 0.01, 0.39, 1.01) | No | Easing function to use for the transitions. | | onNext | function | - | No | Callback function on moving to the next item. | | onPrevious | function | - | No | Callback function on moving to the previous item. | | styleOverrides | object | - | No | Override default styles of the carousel | | scaleFactor | number | 0.9 | No | Scale factor for the carousel items. | | startIndex | number | 0 | No | Index of the item to start on. | | transitionDuration | number | 400 | No | Duration of the transitions in milliseconds. | | verticalOffset | number | 10 | No | % vertical offset for the carousel items. |

Running locally

1. Clone the repo and install the dependencies. In the repo's root, run

# using NPM
npm install

# using yarn
yarn install

2. Switch to the playground folder

cd ./playground

3. Start the development server

# start the Vite development server
yarn dev

Todo

• [ ] Auto compute the container height based on height of the active card
• [ ] Support touch/drag gesture based navigation
• [ ] Plugin system to enable custom transition styles