React 3D Carousel

A modern 3D carousel component library for React applications.

Installation

npm install react-3d-carousel
# or
yarn add react-3d-carousel
# or
pnpm add react-3d-carousel

Features

• 3D carousel with smooth animations
• Multiple 3D carousel variants (simple, cylinder)
• Fully responsive design
• Customizable options
• TypeScript support

Usage

Basic Carousel

import { Carousel3D } from 'react-3d-carousel';

function MyComponent() {
  const items = [
    { id: 1, image: '/image1.jpg', title: 'Item 1' },
    { id: 2, image: '/image2.jpg', title: 'Item 2' },
    { id: 3, image: '/image3.jpg', title: 'Item 3' },
    // Add more items as needed
  ];

  return (
    <Carousel3D
      items={items}
      autoPlay={true}
      autoPlayInterval={3000}
    />
  );
}

Cylinder Carousel

import { Carousel3DCylinder } from 'react-3d-carousel';

function MyComponent() {
  const items = [
    { id: 1, image: '/image1.jpg', title: 'Item 1' },
    { id: 2, image: '/image2.jpg', title: 'Item 2' },
    { id: 3, image: '/image3.jpg', title: 'Item 3' },
    // Add more items as needed
  ];

  return (
    <Carousel3DCylinder
      items={items}
      autoRotate={true}
      autoRotateSpeed={5000}
    />
  );
}

API

Carousel3D

| Prop | Type | Default | Description | |------------------|----------------|---------|--------------------------------------------------| | items | CarouselItem[] | [] | Array of items to display in the carousel | | autoPlay | boolean | true | Whether to auto-play the carousel | | autoPlayInterval | number | 3000 | Interval between auto-play transitions (in ms) |

Carousel3DCylinder

| Prop | Type | Default | Description | |-----------------|----------------|---------|--------------------------------------------------| | items | CarouselItem[] | [] | Array of items to display in the carousel | | autoRotate | boolean | true | Whether to auto-rotate the carousel | | autoRotateSpeed | number | 5000 | Speed of auto-rotation (in ms) |

CarouselItem

interface CarouselItem {
  id: number;
  image: string;
  title: string;
}

License

MIT