minor tweaks

Author: shettypuneeth

README.md

@@ -2,11 +2,13 @@
 
 Stacked card carousal component with configurable 3D transition effect.
 
-# Getting started
+## Demo
 
-## Install
+<img src="./demo/card-carousel.gif" width="300" />
 
-Install react-card-stack-carousel from NPM
+## Getting started
+
+#### Install react-card-stack-carousel from NPM
 
 ```sh
 npm i react-card-stack-carousel
@@ -16,47 +18,39 @@ npm i react-card-stack-carousel
 yarn add react-card-stack-carousel
 ```
 
-## Import react-card-stack-carousel styles
+#### Import react-card-stack-carousel styles
 
 ```tsx
 // import base styles at the top of your component
 import "react-card-stack-carousel/dist/styles.css";
 ```
 
-# Usage
+## Usage
 
 > NOTE: StackedCarousel requires a _height_ property to be specified
 
 ```tsx
 import React from "react";
 import { StackedCarousel } from "react-card-stack-carousel";
-
-import "react-card-stack-carousel/dist/styles.css";
+import "react-card-stack-carousel/dist/styles.css"; // import base styles
 
 export default function App() {
-    const cardWidth = 500;
-    const cardHeight = 500;
+    // specify container height
+    const containerHeight = 500;
 
-    const cardStyles = { width: cardWidth, height: cardHeight };
     return (
         <main className="container">
-            <StackedCarousel height={cardHeight}>
-                <div className="sample-card bg-color-1" style={cardStyles}>
-                    0
-                </div>
-                <div className="sample-card bg-color-2" style={cardStyles}>
-                    1
-                </div>
-                <div className="sample-card bg-color-3" style={cardStyles}>
-                    2
-                </div>
+            <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>
     );
 }
 ```
 
-# Props
+## Props
 
 | Prop                    | Type      | Default                              | Required | Description                                       |
 | ----------------------- | --------- | ------------------------------------ | -------- | ------------------------------------------------- |
@@ -74,7 +68,7 @@ export default function App() {
 | `transitionDuration`    | number    | 400                                  | No       | Duration of the transitions in milliseconds.      |
 | `verticalOffset`        | number    | 10                                   | No       | % vertical offset for the carousel items.         |
 
-# Running locally
+## Running locally
 
 1. Clone the repo and install the dependencies. In the repo's root, run
 
@@ -99,7 +93,7 @@ cd ./playground
 yarn dev
 ```
 
-# Todo
+## Todo
 
-[ ] Auto compute the container height based on height of the active card
-[ ] Plugin system to enable custom transition styles
+-   [ ] Auto compute the container height based on height of the active card
+-   [ ] Plugin system to enable custom transition styles

demo/card-carousel.gif

@@ -1,17 +1,20 @@
 {
     "name": "react-card-stack-carousel",
-    "version": "1.0.0",
+    "version": "0.1.0",
     "description": "A carousel component for React",
     "main": "index.js",
     "scripts": {
         "dev": "vite ./playground"
     },
     "keywords": [
         "react",
-        "carousel"
+        "carousel",
+        "image-carousel",
+        "card-stack"
     ],
     "include": [
         "src/**/*",
+        "dist/**/*",
         "types/**/*"
     ],
     "types": "types/index.d.ts",

package.json

@@ -3,10 +3,11 @@ import { StackedCarousel } from "react-card-stack-carousel";
 import "react-card-stack-carousel/dist/styles.css";
 
 export default function App() {
-    const cardWidth = 500;
-    const cardHeight = 500;
+    const cardWidth = 200;
+    const cardHeight = 200;
 
     const cardStyles = { width: cardWidth, height: cardHeight };
+
     return (
         <main className="container">
             <StackedCarousel autoplay={false} height={cardHeight}>

playground/App.jsx

@@ -23,17 +23,24 @@ body {
 }
 
 .bg-color-1 {
-    background-color: red;
+    background-color: #eb2f06;
 }
 
 .bg-color-2 {
-    background-color: blue;
+    background-color: #fa983a;
 }
 
 .bg-color-3 {
-    background-color: green;
+    background-color: #079992;
 }
 
 .bg-color-4 {
-    background-color: violet;
+    background-color: #1e3799;
+}
+
+.card-image {
+    width: auto;
+    height: 500px;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
 }

playground/styles.css

@@ -16,6 +16,7 @@
     display: flex;
     justify-content: center;
     z-index: 10;
+    background-color: #1f2937;
 }
 
 .rcsc-nav-icon {

src/styles.css

@@ -6,7 +6,7 @@ const DIRECTION = { None: 0, Next: 1, Previous: 2 };
 const DEFAULT_AUTOPLAY = false;
 const DEFAULT_AUTOPLAY_INTERVAL = 4000;
 const DEFAULT_EASING_FUNCTION = "cubic-bezier(0.93, 0.01, 0.39, 1.01)";
-const DEFAULT_TRANSITION_DURATION = 400;
+const DEFAULT_TRANSITION_DURATION = 450;
 const DEFAULT_START_INDEX = 0;
 const DEFAULT_VERTICAL_OFFSET = 10;
 const DEFAULT_SCALE_FACTOR = 0.9;
@@ -104,7 +104,7 @@ export const useCardStackCarousel = (config) => {
             // reset the delay during transition setup for immediate effect
             delay = 0;
             if (virtualIndex === totalCount - 1) {
-                tY = `-${75 + totalCount * 2}%`;
+                tY = `-${72}%`;
                 opacity = 0.6;
                 rotateX = 65;
             } else {