Skip to content

shettypuneeth/react-card-stack-carousel

Repository files navigation

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
  1. Switch to the playground folder
cd ./playground
  1. 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