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