react-carousel3d's Introduction

react-carousel3d

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

从 NPM 下载包

npm i react-carousel3

Basic usage

Demo:

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

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.

Option	Description	Default
height	container height
width	container width
xOrigin	Center of the carousel (x coordinate)	(container width / 2)
yOrigin	Center of the carousel (y coordinate)	(container height / 10)
xRadius	Half the width of the carousel	(container width / 2.3)
yRadius	Half the height of the carousel	(container height / 6)
autoPlay	auto play	false