Description:
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:
