3D Perspective Carousel For React

A fancy automatic 3D perspective carousel component for React applications.

How to use it:

1. Install and import the carousel component.

# Yarn
$ yarn add react-carousel3

# NPM
$ npm i react-carousel3

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

2. Create a 3D perspective carousel in your app.

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

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

3. All available carousel options.

• height
• width
• xOrigin
• yOrigin
• xRadius
• yRadius
• autoPlay

Preview:

Download Details:

Author: xiaxiangfeng

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/xiaxiangfeng/react-carousel3d

License: MIT