Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lijinke666/react-3d-gallery
a react 3d gallery componet
https://github.com/lijinke666/react-3d-gallery
componet cover css3 gallery image image-gallery-react photo react webpack
Last synced: about 1 month ago
JSON representation
a react 3d gallery componet
- Host: GitHub
- URL: https://github.com/lijinke666/react-3d-gallery
- Owner: lijinke666
- License: mit
- Created: 2017-08-11T10:29:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-01T17:19:37.000Z (over 4 years ago)
- Last Synced: 2024-11-17T00:00:21.150Z (about 2 months ago)
- Topics: componet, cover, css3, gallery, image, image-gallery-react, photo, react, webpack
- Language: JavaScript
- Homepage: https://lijinke666.github.io/react-3d-gallery/
- Size: 539 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-3d-gallery
a react 3d gallery component
## Installation
```
npm install react-3d-gallery --save
```
## Example
### [Live Demo](https://lijinke666.github.io/react-3d-gallery/)
```
git clone https://github.com/lijinke666/react-3d-gallery.git
```
```
npm run demo
```
```javascript
import React from "react"
import ReactDOM from "react-dom"
import Gallery3d from "react-3d-gallery"
const cover = (id) => ({
href:"https://www.github.com",
cover: "http://p1.music.126.net/PQsm4zVDlbCeNACgW1j3QA==/18831335650676452.jpg?param=400y400",
mask: (
title{id+1}
content{id+1}
),
})
const categories = [...new Array(8)].map((item, i) => { item = cover(i); return item })
const options = {
categories,
width: 400,
height: 400,
speed:1000,
autoPlay: true,
autoPlaySpeed: 4000,
space: 20,
arrow: true,
backfaceVisibility: false
}
const Demo = () => (
)
ReactDOM.render(
,
document.getElementById('root')
)
```
### options
---
- #### categories
- type : `Array`
- default : `300`
- explain : `gallery categories object[]`
- options.href : type : `String` `target href`
- options.cover : type : `String` `gallary cover`
- options.mask : type : `String | ReactNode` `gallary mask`
- #### width
- type : `Number`
- default : `300`
- explain : `cover width (px)`
- #### height
- type : `Number`
- default : `300`
- explain : `cover height (px)`
- #### space
- type : `Number`
- default : `30`
- explain : `The time required to convert (ms)`
- #### autoPlay
- type : `Boolean`
- default : `true`
- explain : `Whether to scroll automatically`
- #### autoPlaySpeed
- type : `Number`
- default : `4000`
- explain : `auto play speed (ms)`
- #### arrow
- type : `Boolean`
- default : `true`
- explain : `Whether to show the arrow of the gallery`
- #### backfaceVisibility
- type : `Boolean`
- default : `true`
- explain : `Whether to show backface visibility of the gallery`
---