react-fluid-gallery (demo)
Fluid media gallery for React powered by WebGL.
Inspired by Tao Tajima. Use the scroll wheel or swipe to transition fluidly between background images in the gallery.
Install
npm install --save react-fluid-galleryUsage
Check out the demo.
import React, { Component } from 'react'
import FluidGallery from 'react-fluid-gallery'
import image1 from './1.jpg'
import image2 from './2.jpg'
import video from './video.mp4'
export default class App extends Component {
render () {
return (
<FluidGallery
style={{ width: '100vw', height: '100vh' }}
slides={[ image1, image2, video ]}
/>
)
}
}Props
| Property | Type | Default | Description |
|---|---|---|---|
slides |
Array<string> |
required | Array of image / video URLs to use for the gallery slides. |
startAt |
number | random | Default slide to show. |
onChange |
function(index: number) | undefined | Optional callback when the active slide is changed. |
... |
... | undefined | Any other props are applied to the root element. |
Credits
The original version of this awesome gallery technique was published on the personal website of Tao Tajima.
License
MIT © Travis Fischer
Support my OSS work by following me on twitter
