react-carousel3d

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

Image text

从 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.

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

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

GitHub

View Github