Update readme and minor fixes

Author: shettypuneeth

.gitignore

@@ -15,6 +15,7 @@ pids
 *.pid
 *.seed
 *.pid.lock
+.DS_Store
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov

README.md

@@ -6,6 +6,8 @@ Stacked card carousal component with configurable 3D transition effect.
 
 <img src="./demo/card-carousel.gif" width="300" />
 
+<img src="./demo/image-carousel.gif" width="300" />
+
 ## Getting started
 
 #### Install react-card-stack-carousel from NPM
@@ -22,7 +24,7 @@ yarn add react-card-stack-carousel
 
 ```tsx
 // import base styles at the top of your component
-import "react-card-stack-carousel/dist/styles.css";
+import "react-card-stack-carousel/styles/styles.css";
 ```
 
 ## Usage
@@ -32,11 +34,11 @@ import "react-card-stack-carousel/dist/styles.css";
 ```tsx
 import React from "react";
 import { StackedCarousel } from "react-card-stack-carousel";
-import "react-card-stack-carousel/dist/styles.css"; // import base styles
+import "react-card-stack-carousel/styles/styles.css"; // import base styles
 
 export default function App() {
     // specify container height
-    const containerHeight = 500;
+    const containerHeight = 250;
 
     return (
         <main className="container">
@@ -96,4 +98,5 @@ 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

demo/card-carousel.gif

@@ -14,7 +14,7 @@
     ],
     "include": [
         "src/**/*",
-        "dist/**/*",
+        "styles/**/*",
         "types/**/*"
     ],
     "types": "types/index.d.ts",

demo/image-carousel.gif

@@ -1,6 +1,6 @@
 import React from "react";
 import { StackedCarousel } from "react-card-stack-carousel";
-import "react-card-stack-carousel/dist/styles.css";
+import "react-card-stack-carousel/styles/styles.css";
 
 export default function App() {
     const cardWidth = 200;

package.json

@@ -127,6 +127,10 @@ export const useCardStackCarousel = (config) => {
     };
 
     const handleTransition = (nextDirection, nextTransition, getNextIndex) => {
+        if (totalCount === 1) {
+            return;
+        }
+
         direction.current = nextDirection;
         setTransitionState(nextTransition);
 

playground/App.jsx

@@ -11,12 +11,11 @@
 
 .rcsc-nav-container {
     position: absolute;
-    bottom: -25px;
+    bottom: -40px;
     width: 100%;
     display: flex;
     justify-content: center;
     z-index: 10;
-    background-color: #1f2937;
 }
 
 .rcsc-nav-icon {
@@ -27,5 +26,12 @@
     height: 15px;
     border-radius: 50%;
     margin: 0 5px;
+    padding: 8px;
     cursor: pointer;
+    background-color: #374151;
+    transition: background-color 0.3s;
+}
+
+.rcsc-nav-icon:hover {
+    background-color: #1e293b;
 }