3d-carousel-component

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.