3d-carousel-component

Image

3d-carousel-component

• This is a classy 3d carousel for react.js;✨💞

Table of Contents

• Getting Started🚀
• Customization🔥
  • Props List
    • ContainerStyle
    • CardStyle
    • CardList
• 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
  • 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 😉)

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 constCardStyle = {
		Width:  "100%",
		BackgroundColor: "blanchedalmond",
		Padding:  "0.5em 1em",
	};

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

export defalut YourComponent;

Issues??🐛

• Having any issues or found any bugs free fell to reach us on github.📧

Special Mention💕