React-3d-animated-carousel NPM

react-animated-carousel-withDescription

A responsive full page animated carousel with description, changes color per slide and works with dark mode.
Have a Look at the Example

Getting Started🚀
Customization🔥
Examples👾
Issues??🐛

Getting Started🚀

npm i react-3d-animated-carousel

import {Carousel} from "3d-carousel-component";

const YourComponent = () => {
  return (
    <Carousel
      isDark={false}
      data={data}
    />
  );
};

Customization🔥

Basically you have to pass two props, Namely:
- isDark
- data
Out of this, first is for styling the component for dark mode.

Note all variables, props, properties follow UpperCamelCase Rule.*

isDark

It allows you to style component for dark mode.
Properties available are true or false.

data

It bassically an array of objects with some mandatory or optional keys,
Following properties are available: 😉

Key	Function
heading	topic of the slide.
description	description of the slide.
textOnly*	true or false, if keyword is a link or not
text	highlighted text or button
image	carousel image
color*	color property for slide (optional)
link	mandatory if textOnly: false(or missing)

Look at the example below for more understanding.

Examples👾

import {Carousel} from "3d-carousel-component";

import kaguya from "./assets/kaguya.jpg";
import opm from "./assets/opm.jpg";
import horimiya from "./assets/horimiya.jpg";
import DS from "./assets/demonslayer.jpg";
import mha from "./assets/mha.jpg";
import batman from "./assets/batman.jpg";

const YourComponent  =  ()  =>  {
	//List of element you want inside carousel.
	const content=[
    {
        heading:"Kaguya Sama: Love is war",
        description:"Two high school geniuses, Shirogane and Kaguya, can't admit they're in love, so each tries to win a confession of affection from the other.",
        textOnly:true,
        text:"This is text",
        image:kaguya
    },
    {
        heading:"One Punch Man",
        description:"The story of Saitama, a hero that does it just for fun & can defeat his enemies with a single punch.",
        text:"This is Link",
        image:opm,
        color:"#ffaf24",
        link:""
    },
    {
        heading:"Horimiya",
        description:"Two very different people - an academically successful schoolgirl and a quiet loser schoolboy - meet and develop a friendship.",
        text:"This is a link",
        image:horimiya,
        color:"#275BBF",
        link:""
    },
    {
        heading:"Demon Slayer",
        description:"The anime follows Tanjiro Kamado and his journey after his family's demise at the hands of the Demon King Muzan Kibutsuji.",
        text:"Again a link",
        image:DS,
        color:"#A020F0",
        link:""
    },
    {
        heading:"My Hero Academia",
        description:"Set in a world where superpowers (called Quirks) have become commonplace, the story follows Izuku Midoriya, a boy who was born without a Quirk but still ...",
        textOnly:true,
        text:"I love it and you should too.",
        image:mha,
        color:"#06b885",
    },
    {
        heading:"The Batman",
        description:"the superhero protector of Gotham City, a tortured, brooding vigilante dressed as a bat who fights against evil and strikes fear into the hearts.",
        text:"The moon is a loyal companion fr.",
        color:"#E33737",
        image:batman,
        textOnly:true,
    }
]

	return  <Carousel
			isDark={false}
      data={content}
		/>;
};

export defalut YourComponent;