https://github.com/xiaxiangfeng/react-carousel3d
A 3D perspective carousel 3D效果的走马灯
https://github.com/xiaxiangfeng/react-carousel3d
carousel carousel3d react-carousel react-carousel3d
Last synced: 4 months ago
JSON representation
A 3D perspective carousel 3D效果的走马灯
- Host: GitHub
- URL: https://github.com/xiaxiangfeng/react-carousel3d
- Owner: xiaxiangfeng
- Created: 2022-10-11T09:56:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-31T09:34:16.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T12:09:30.956Z (4 months ago)
- Topics: carousel, carousel3d, react-carousel, react-carousel3d
- Language: TypeScript
- Homepage: https://xiaxiangfeng.github.io/react-carousel3d/#/carousel
- Size: 4.34 MB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-carousel3d
> A 3D perspective carousel。预览地址：https://xiaxiangfeng.github.io/react-carousel3d/#/carousel
## 从 NPM 下载包
```npm
npm i react-carousel3
```
## Basic usage
Demo:
```tsx
import React from 'react';
import { Carousel } from 'react-carousel3';
const style = {
width: 297,
height: 296,
};
export default () => (
);
```
### 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,
```bash
$ npm i
```
Start the dev server,
```bash
$ npm start
```
Build documentation,
```bash
$ npm run docs:build
```
Run test,
```bash
$ npm test
```
Build library via `father`,
```bash
$ npm run build
```