a react 3d gallery component
npm install react-3d-gallery --save
git clone https://github.com/lijinke666/react-3d-gallery.git
npm run demo
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: (
<div className="photo-cover">
<h4 key="photo-title" className="cover-title">title{id+1}</h4>
<p key="photo-content" className="cover-content">content{id+1}</p>
</div>
),
})
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 = () => (
<Gallery3d {...options} style={{ "margin": "50px auto" }} />
)
ReactDOM.render(
<Demo />,
document.getElementById('root')
)
-
- 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
- options.href : type :
- type :
-
- type :
Number
- default :
300
- explain :
cover width (px)
- type :
-
- type :
Number
- default :
300
- explain :
cover height (px)
- type :
-
- type :
Number
- default :
30
- explain :
The time required to convert (ms)
- type :
-
- type :
Boolean
- default :
true
- explain :
Whether to scroll automatically
- type :
-
- type :
Number
- default :
4000
- explain :
auto play speed (ms)
- type :
-
- type :
Boolean
- default :
true
- explain :
Whether to show the arrow of the gallery
- type :
-
- type :
Boolean
- default :
true
- explain :
Whether to show backface visibility of the gallery
- type :