3d-carousel-component - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

dist/components/Carousel3D.js

@@ -45,2 +45,3 @@ "use strict";
 var Carousel3D = function Carousel3D(props) {
+  //Extracting Valid paramters for custom styling;
   var ContainerStyle = {
@@ -57,2 +58,4 @@ width: props.ContainerStyle.Width || "100%",
     height: props.CardStyle.Height || "none",
+    backgroundColor: props.CardStyle.BackgroundColor || "",
+    background: props.CardStyle.Background || "null",
     aspectRatio: props.CardStyle.AspectRatio || "none",
@@ -66,3 +69,3 @@ padding: props.CardStyle.Padding || "0"
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(2),
       _useState2 = _slicedToArray(_useState, 2),
@@ -80,15 +83,25 @@ current = _useState2[0],
     setToShow(function () {
-      var val = 0;
+      var cardlength = props.CardList.length;
       var temp = [1];
-      slide.map(function () {
-        temp.push(val);
-        val += 1;
-        if (val === props.CardList.length) val = 0;
-        return 0;
-      });
+
+      if (cardlength >= 3) {
+        temp.push(cardlength - 2);
+        temp.push(cardlength - 1);
+        temp.push(0);
+        temp.push(1);
+        temp.push(2);
+      } else {
+        temp.push(0);
+        temp.push(cardlength - 1);
+        temp.push(0);
+        temp.push(cardlength - 1);
+        temp.push(0);
+      }
+
       return temp;
     });
-  }, [props.CardList, slide]); //Next Slide Handler
+  }, [props.CardList]); //Next Slide Handler
 
   var nextSlide = (0, _react.useCallback)(function () {
+    //setCurrent to next slide
     setCurrent(function (prevState) {
@@ -108,2 +121,3 @@ return prevState === length - 1 ? 0 : prevState + 1;
   var prevSlide = function prevSlide() {
+    //setCurrent to prev slide
     setCurrent(current === 0 ? length - 1 : current - 1); //Change the toshow array to change content of carousel
@@ -110,0 +124,0 @@

package.json

 {
   "name": "3d-carousel-component",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A classy 3d carousel for react.js",
@@ -10,3 +10,7 @@ "main": "dist/index.js",
     "transpile": "babel src -d dist --copy-files",
-    "prepublishOnly": "npm run transpile"
+    "prepublishOnly": "npm run transpile",
+    "build": "webpack --mode production",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "publish-demo": "npm run build && npm run deploy"
   },
@@ -17,3 +21,7 @@ "repository": {
   },
-  "author": "Rahul Modi",
+  "author": {
+    "name": "Rahul Modi",
+    "email": "[e-mail]",
+    "url": "https://github.com/RahulModi1310"
+  },
   "license": "ISC",
@@ -23,3 +31,3 @@ "bugs": {
   },
-  "homepage": "https://github.com/RahulModi1310/3d-carousel-component#readme",
+  "homepage": "https://github.com/RahulModi1310.github.io/3d-carousel-component",
   "devDependencies": {
@@ -34,2 +42,3 @@ "@babel/cli": "^7.17.0",
     "file-loader": "^6.2.0",
+    "gh-pages": "^3.2.3",
     "html-webpack-plugin": "^5.5.0",
@@ -36,0 +45,0 @@ "react": "^17.0.2",

README.md

 # 3d-carousel-component
 
 - A classy 3d carousel for react.js;✨💞
+  ![Example](./demo/Assets/demoExample.gif)
 
@@ -118,1 +119,3 @@ # Table of Contents
 ## Special Mention💕
+
+- Special Thanks to [Akshit Gupta](https://github.com/AkshitGuptaIITR) for the constant motivation and support.

New alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16371

increased by6.98%

Lines of code

223

increased by9.31%

Number of lines in readme file

121

increased by2.54%

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of low quality alerts

2

increased by100%

No dependency changes