Add changeSlide props

example/package.json

@@ -8,7 +8,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-fluid-gallery": "link:..",
+    "react-fluid-gallery": "file:..",
     "react-github-corner": "^2.3.0",
     "react-scripts": "^1.1.4"
   },

example/src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import FluidGallery from 'react-fluid-gallery'
+import FluidGallery, { changeSlideEnum } from 'react-fluid-gallery'
 import GitHubCorner from 'react-github-corner'
 
 import video1 from './assets/0.mp4'
@@ -22,17 +22,36 @@ const images = [
 ]
 
 export default class App extends Component {
+
+  constructor() {
+    super()
+    this.state = {
+      changeSlide: undefined
+    }
+  }
+
+  onClickPrev = () => {
+    this.setState({changeSlide: changeSlideEnum.prev});
+  }
+
+  onClickNext = () => {
+    this.setState({changeSlide: changeSlideEnum.next});
+  }
+
   render () {
     return (
       <div
         style={{
           height: '100vh'
         }}
       >
+        <button onClick={this.onClickNext}> Click to go to next slide</button>
+        <button onClick={this.onClickPrev}> Click to go to prev slide</button>
         <FluidGallery
           slides={images}
           startAt={0}
           onChange={this._onChange}
+          changeSlide={this.state.changeSlide}
         />
 
         <div

package.json

@@ -56,7 +56,8 @@
     "gh-pages": "^1.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4"
+    "react-scripts": "^1.1.4",
+    "yarn": "^1.22.17"
   },
   "files": [
     "dist"

readme.md

@@ -47,6 +47,7 @@ export default class App extends Component {
 | `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. |
+| `changeSlide`  | `changeSlideEnum.next \| changeSlideEnum.prev` | undefined   | Passing down `next` will change the active slide to the next, whereas passing down `prev` will change the active slide to the previous. This is useful if you want to control the slide transition in the consuming application by means other than manually swiping / scrolling. See an example of this in ./example. |
 | `...`       | ...              | undefined | Any other props are applied to the root element. |
 
 ## Credits

src/index.js

@@ -11,6 +11,11 @@ import FluidGallery from './fluid-gallery'
 
 const noop = () => undefined
 
+export const changeSlideEnum = {
+  next: 'next',
+  prev: 'prev'
+}
+
 class ReactFluidGallery extends Component {
   static propTypes = {
     slides: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -20,12 +25,14 @@ class ReactFluidGallery extends Component {
     size: PropTypes.shape({
       width: PropTypes.number,
       height: PropTypes.number
-    })
+    }),
+    changeSlide: PropTypes.oneOf(Object.keys(changeSlideEnum))
   }
 
   static defaultProps = {
     onChange: noop,
-    style: { }
+    style: { },
+    changeSlide: undefined,
   }
 
   _current = (typeof this.props.startAt !== 'undefined'
@@ -51,12 +58,24 @@ class ReactFluidGallery extends Component {
     }
   }
 
+  shouldComponentUpdate(nextProps) {
+    const { changeSlide } = nextProps
+    if (changeSlide) {
+      const multiplier = changeSlide === changeSlideEnum.prev ? -1 : 1
+      const deltaY = this._canvas.height * 1.5 * multiplier
+      this._gallery.onScroll({ deltaY })
+      return false
+    }
+    return true
+  }
+
   render() {
     const {
       slides,
       startAt,
       onChange,
       style,
+      changeSlide,
       ...rest
     } = this.props