3d-carousel-component

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

  

  Have a Look at the Example

Table of Contents

• Getting Started🚀
• Customization🔥
• Examples👾
• Issues??🐛
• Special Mention💕

Getting Started🚀

npm i 3d-carousel-component

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👾

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

Issues??🐛

• Having any issues or found any bugs, feel free to reach me on github - click here.📧

Special Mention💕

• Special Thanks to Akshit Gupta for constant motivation and support.