Merge pull request #49 from chrishinrichs/master

Toggle autoplay using IntersectionObserver

Author: chrishinrichs

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.7.0 - Apr 2020
+
+***(FEATURE)*** Add support for IntersectionObserver and disable autoplay functionality when the carousel is outside the viewport
+
 # 1.6.0 - Feb 2020
 
 ***(FEATURE)*** Add `onSlideTransitioned` callback and updated `arrows` prop to support custom arrows

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-img-carousel",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Provides an image carousel React component.",
   "main": "lib/index.js",
   "repository": {

src/index.js

@@ -177,6 +177,21 @@ export default class Carousel extends Component {
     }
 
     window.addEventListener('resize', this.calcLeftOffset, false);
+
+    if (window.IntersectionObserver) {
+      this._observer = new window.IntersectionObserver(entries => {
+        if (!this.props.autoplay) {
+          return;
+        }
+
+        if (entries && entries[0] && entries[0].isIntersecting) {
+          this.startAutoplay();
+        } else {
+          clearTimeout(this._autoplayTimer);
+        }
+      });
+      this._observer.observe(this._containerRef);
+    }
   }
 
   componentWillUnmount() {
@@ -187,6 +202,7 @@ export default class Carousel extends Component {
     clearTimeout(this._autoplayTimer);
     clearTimeout(this._retryTimer);
     clearTimeout(this._initialLoadTimer);
+    this._observer && this._observer.unobserve(this._containerRef);
     this._isMounted = false;
   }
 
@@ -436,7 +452,7 @@ export default class Carousel extends Component {
     const controls = this.getControls();
 
     return (
-      <div className={ classes } style={ containerStyle }>
+      <div className={ classes } style={ containerStyle } ref={ c => { this._containerRef = c; } }>
         <div className='carousel-container-inner' style={ innerContainerStyle }>
           {
             controls.filter(Control => {