Skip to content

transitive-bullshit/react-fluid-gallery

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Dec 2, 2018
src
.
Dec 4, 2018
Nov 30, 2018
.
Dec 4, 2018
Dec 2, 2018
Jul 11, 2020
.
Dec 2, 2018

react-fluid-gallery (demo)

Fluid media gallery for React powered by WebGL.

NPM Build Status JavaScript Style Guide

Demo

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

Usage

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 twitter