Skip to content

Elevate your presentations with React-3DM-Carousel, a captivating and customizable 3D carousel component. Impress users with seamless navigation, interactive scrolling, and complete control. Showcase your work in style!

Notifications You must be signed in to change notification settings

Hunter-7010/react-3dm-carousel

Repository files navigation

React-3DM-Carousel is a powerful and versatile carousel component for React applications. With its captivating 3D effect, it provides an exceptional way to showcase your gallery, portfolio, or projects in an engaging and visually appealing manner.

Key Features:

1- Immersive 3D Carousel: The React-3DM-Carousel offers an eye-catching 3D carousel, adding depth and interactivity to your content.

2- Smooth Dragging and Gesture Support: Experience seamless dragging on touch and mouse, providing a responsive and intuitive interaction.

3- Interactive Scrolling: Rotate the carousel with ease using scrolling, enhancing interactivity and navigation.

4- Customizable Cards and Images: Easily modify displayed cards and images to suit your needs, offering complete visual control.

5- Flexible Feature Control: Comprehensive feature control to enable, disable, or customize functionalities according to your requirements.

Carousel Example

Example

Edit react-3dm-carousel-basic-example

Installation and usage

Install it via npm:

npm i react-3dm-carousel

or yarn:

yarn add react-3dm-carousel

Then import the Carousel component like so :

import { Carousel } from 'react-3dm-carousel';

All you need to do:

import { Carousel } from "react-3dm-carousel";
const App = () => {
 return (
    <div className="">
      <Carousel />
    </div>
  );
}

Carousel with Nextcardfunction and previousCardFunction

import { Carousel, FunctionsRefType } from "react-3dm-carousel";
const App = () => {
  const carouselRef = useRef<FunctionsRefType>(null);
  const handleNext = () => {
    carouselRef.current && carouselRef.current.nextCardHandler();
  };
  const handlePrev = () => {
    carouselRef.current && carouselRef.current.prevCardHandler();
  };
 return (
    <div className="">
      <Carousel
        cardsData={data}
        rotation={false}
        tilt={false}
        freeRoam={false}
        startingAnimation={true}
        drag={true}
        ref={carouselRef}
      />
    </div>
  );
}

Carousel with all the props

import { Carousel } from "react-3dm-carousel";
const App = () => {
  const onTitleClickHandler =(card:CardType)=>{
    console.log("clicked card",card)
  }
  const [selectedCardIdx,setSelectedCardIdx]=useState(0)
 return (
    <div className="">
      <Carousel
        cardsData={data}
        setSelectedCardIdx={setSelectedCardIdx}
        rotation={true}
        rotationDuration={60}
        tilt={true}
        freeRoam={false}
        freeRoamLowerBounds={-180}
        freeRoamUpperBounds={0}
        onTitleClickHandler={onTitleClickHandler}
        startingAnimation={true}
        rotateOnScroll={true}
        drag={true}
      />
    </div>
  );
}

Styles

.rootCarousel {    /* carousel container */
  transform-style: preserve-3d;
  perspective: 1300px;
}
.bigTitle {/* Title */
  @apply text-[1.2rem] lg:text-[1.7rem] 2xl:text-[2.6rem] 2xl:max-w-[18rem] max-w-[12rem] hover:underline transition-all  duration-300 cursor-pointer leading-7 min-[1500px]:leading-10;
  text-decoration-color: #ffc2e2 !important;
}
.content { /* Title is inside this */
  @apply px-8 flex flex-col gap-y-3 absolute bottom-[10%] lg:bottom-[10%] xl:bottom-[5%] 2xl:bottom-[10%] z-20 select-none;
}
.description {
  @apply 2xl:max-w-[18rem] max-w-[8.5rem] text-[9px] lg:max-w-[12rem] 2xl:text-lg xl:text-[11px];
}

.dragContainer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.spinContainer { /* add responsiveness to your cards over here i mixed tailwind with css but you can use it however you want */
  @apply w-[150px] sm:w-[220px] md:w-[220px] 2xl:w-[320px];
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  aspect-ratio: 0.67;
}
@media (min-width: 1500px) {
  .spinContainer {
    width: 320px;
  }
}

.images {/* How the image should look */
  @apply bg-cover rounded-lg bg-gray-300;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ground {
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
  transform: translate(-50%, -50%) rotateX(90deg);
  background: -webkit-radial-gradient(
    center center,
    farthest-side,
    rgba(174, 171, 171, 0.353),
    transparent
  );
}

And you're all set. You can also use props for better control of how the carousel looks and behaves:

Props

Name Default value Description
cardsData dummy data An array containing elements of the form [{ id: string; title: string; description: string; image: string; routeTo?: string }] where key holds any unique value, title and description for the title and description and image url for the background image of the card.
startingAnimation true Optional Enable or disable the starting animation of the carousel. Defaults to true.
rotateOnScroll true Optional Enable or disable the rotating of the carousel on scroll. Defaults to true.
drag true Optional Enable or disable the dragging of the carousel. Defaults to true.
rotation true Optional Enable or disable rotation of the carousel. Defaults to true (rotation is enabled).
rotationDuration 60 Optional time in seconds it takes to complete a full rotation. Only applicable when rotation is enabled. defaults to 60 seconds.
tilt true Optional Cool tilt effect on Carousel relative to mouse position. defaults to true.
setSelectedCardIdx undefined Optional React state setter to pass your setState to Carousel. defaults to undefined.
freeRoam false Optional Enables the user to freely rotate and move around the carousel canvas. defaults to false enabling this feature will cause the tilt to disable.
freeRoamUpperBounds 0 Optional define the upper bounds of the free roam. make upper bounds to 360 and lower bounds to -360 to move in all directions.
freeRoamLowerBounds -180 Optional define the upper bounds of the free roam. make upper bounds to 360 and lower bounds to -360 to move in all directions.
onTitleClickHandler ()=>{} Optional Provide an onclick handler function for title, when it is clicked it will return the clicked card. defaults to ()=>{}. /- Can be useful if you want to route to another path that you defined in your function.

About

Elevate your presentations with React-3DM-Carousel, a captivating and customizable 3D carousel component. Impress users with seamless navigation, interactive scrolling, and complete control. Showcase your work in style!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published