# 3d-carousel-component

> A classy 3d carousel for react.js

Latest version **1.1.6** (published 2022-02-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install 3d-carousel-component
pnpm add 3d-carousel-component
yarn add 3d-carousel-component
bun add 3d-carousel-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2022-02-21 |
| First published | 2022-02-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Rahul Modi |
| Maintainers | rahul13 |

## Links

- npm: https://www.npmjs.com/package/3d-carousel-component
- Repository: https://github.com/RahulModi1310/3d-carousel-component
- Homepage: https://github.com/RahulModi1310.github.io/3d-carousel-component
- Issues: https://github.com/RahulModi1310/3d-carousel-component/issues
- npm.io page: https://npm.io/package/3d-carousel-component

## Recent versions

- 1.1.6 (latest) — 2022-02-21
- 1.1.4 — 2022-02-21
- 1.1.3 — 2022-02-21
- 1.1.2 — 2022-02-21
- 1.1.1 — 2022-02-21
- 1.1.0 — 2022-02-21
- 1.0.7 — 2022-02-11
- 1.0.6 — 2022-02-11
- 1.0.5 — 2022-02-11
- 1.0.4 — 2022-02-11
- 1.0.3 — 2022-02-11

## README

# 3d-carousel-component

- A classy 3d carousel for react.js;✨💞

  ![Example](./demo/Assets/demoExample.gif)
  
  Have a Look at the [Example](https://rahulmodi1310.github.io/3d-carousel-component/)

# Table of Contents

- [Getting Started🚀](#getting-started)
- [Customization🔥](#customization)
- [Examples👾](#examples)
- [Issues??🐛](#issues)
- [Special Mention💕](#special-mention)

## Getting Started🚀

**`npm i 3d-carousel-component`**

```javascript
import Carousel3D from "3d-carousel-component";

const YourComponent = () => {
  return (
    <Carousel3D
      ContainerStyle={ContainerStyle}
      CardStyle={CardStyle}
      CardList={CardList}
    />
  );
};
```

## Customization🔥

- Basically you have to pass three props, Namely:
  - ContainerStyle
  - CardStyle
  - CardList
- Out of this first two are for styling and last one contains list of your cards.
- Note all variables, props, properties follow UpperCamelCase Rule.\*

  ### ContainerStyle

  - It allows you to style the main outer container of carousel.
  - Following properties are available:

  | Key             | Function                               |
  | :-------------- | :------------------------------------- |
  | Width           | Width of the main container            |
  | Height          | Height of the main container           |
  | Padding         | Padding of the main container          |
  | Margin          | Margin of the main container           |
  | BackgroundColor | Background color of the main container |
  | Background      | Background property                    |

  - Look at the example below for more understanding.

  ### CardStyle

  - It allows you to style each card of the carousel.
  - Following properties are available:

  | Key         | Function                          |
  | :---------- | :-------------------------------- |
  | Width       | Width of each Card                |
  | Height      | Height of each Card               |
  | Padding     | Padding inside of your Card       |
  | AspectRatio | Defines Aspect ratio of your Card |

  - Look at the example below for more understanding.

  ### CardList

  - It bassically an array of objects with _"element"_ key containing content of your card.
    Can be anyting you wish to have...How about a carousel with embeded youtube videos.😉 

## Examples👾

```javascript
import Carousel3D from  "3d-carousel-component";

const YourComponent  =  ()  =>  {
	//List of element you want inside carousel.
	const  CardList  = [
		{ element:  <div>Card 1</div>, },
		{ element:  <div>Card 2</div>, },
		{ element:  <div>Card 3</div>, },
		{ element:  <div>Card 4</div>, },
		{ element:  <div>Card 5</div>, },
		{ element:  <div>Card 6</div>, },
		{ element:  <div>Card 7</div>, },
		{ element:  <div>Card 8</div>, },
	];
	const ContainerStyle = {
		BackgroundColor:  "Cyan",
		Width:  "100%",
		Padding:  "1em",
		Margin:  "auto",
	};
	const CardStyle = {
		Width:  "100%",
		BackgroundColor: "blanchedalmond",
		Padding:  "0.5em 1em",
	};

	return  <Carousel3D
			ContainerStyle={ContainerStyle}
			CardStyle={CardStyle}
			CardList={CardList}
		/>;
};

export defalut YourComponent;
```

Example Code Link: [click here](https://codesandbox.io/s/3d-carousel-component-srwf5v)

## Issues??🐛

- Having any issues or found any bugs, feel free to reach me on github - [click here](https://github.com/RahulModi1310/3d-carousel-component/issues).📧

## Special Mention💕

- Special Thanks to [Akshit Gupta](https://github.com/AkshitGuptaIITR) for constant motivation and support.

---
_Source: https://npm.io/package/3d-carousel-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._