Are you tired of the same old flat, two-dimensional carousels on your website? Want to add a touch of magic and depth to your user interface? Look no further! 🌟

react-carousel3d is here to revolutionize how you showcase images, products, or any visual content. Built specifically for ReactJS, this library brings a whole new level of interactivity and engagement to your web applications.

Live Demo & GitHub

react-carousel3d

A 3D perspective carousel。预览地址：https://xiaxiangfeng.github.io/react-carousel3d/

从 NPM 下载包

npm i react-carousel3

Basic usage

Demo:

import React from 'react';
import { Carousel } from 'react-carousel3d';

const style = {
  width: 297,
  height: 296,
};

export default () => (
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      background: 'linear-gradient(to bottom, #16235e 0%, #020223 100%)',
    }}
  >
    <Carousel height={460} width={980} yOrigin={42} yRadius={48} autoPlay={true}>
      <div key={1} style={style}>
        <img alt="" src="/image/1.png" />
      </div>
      <div key={2} style={style}>
        <img alt="" src="/image/2.png" />
      </div>
      <div key={3} style={style}>
        <img alt="" src="/image/3.png" />
      </div>
      <div key={4} style={style}>
        <img alt="" src="/image/4.png" />
      </div>
      <div key={5} style={style}>
        <img alt="" src="/image/5.png" />
      </div>
      <div key={6} style={style}>
        <img alt="" src="/image/6.png" />
      </div>
    </Carousel>
  </div>
);

Carousel options

You may pass these options to the carousel constructor. Some of these properties may be changed during runtime via the data handle.

Getting Started

Install dependencies,

$ npm i

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Run test,

$ npm test

Build library via father,

$ npm run build