react-slideshow-image 3.4.6 → 3.6.0

package/lib/fade.js

@@ -67,6 +67,8 @@ function (_Component) {
     _this.tweenGroup = new _tween["default"].Group();
     _this.reactSlideshowWrapper = (0, _react.createRef)();
     _this.wrapper = (0, _react.createRef)();
+    _this.startSwipe = _this.startSwipe.bind(_assertThisInitialized(_this));
+    _this.endSwipe = _this.endSwipe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -258,28 +260,68 @@ function (_Component) {
         this.goNext();
       }
     }
+  }, {
+    key: "startSwipe",
+    value: function startSwipe(e) {
+      var _getProps6 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps6.canSwipe;
+
+      if (canSwipe) {
+        this.startingClientX = e.touches ? e.touches[0].pageX : e.clientX;
+        clearTimeout(this.timeout);
+        this.dragging = true;
+      }
+    }
+  }, {
+    key: "endSwipe",
+    value: function endSwipe(e) {
+      var clientX = e.changedTouches ? e.changedTouches[0].pageX : e.clientX;
+      var distance = clientX - this.startingClientX;
+
+      var _getProps7 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps7.canSwipe;
+
+      if (canSwipe) {
+        this.dragging = false;
+
+        if (Math.abs(distance) / this.width > 0.2) {
+          if (distance < 0) {
+            this.goNext();
+          } else {
+            this.goBack();
+          }
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this5 = this;
 
-      var _getProps6 = (0, _props.getProps)(this.props),
-          indicators = _getProps6.indicators,
-          children = _getProps6.children,
-          arrows = _getProps6.arrows;
+      var _getProps8 = (0, _props.getProps)(this.props),
+          indicators = _getProps8.indicators,
+          children = _getProps8.children,
+          arrows = _getProps8.arrows,
+          cssClass = _getProps8.cssClass;
 
       var index = this.state.index;
       var unhandledProps = (0, _helpers.getUnhandledProps)(_props.propTypes, this.props);
       return _react["default"].createElement("div", _extends({
+        dir: "ltr",
         "aria-roledescription": "carousel"
       }, unhandledProps), _react["default"].createElement("div", {
         className: "react-slideshow-container",
         onMouseEnter: this.pauseSlides,
         onMouseOver: this.pauseSlides,
         onMouseLeave: this.startSlides,
+        onMouseDown: this.startSwipe,
+        onMouseUp: this.endSwipe,
+        onTouchStart: this.startSwipe,
+        onTouchEnd: this.endSwipe,
+        onTouchCancel: this.endSwipe,
         ref: this.reactSlideshowWrapper
       }, arrows && (0, _helpers.showPreviousArrow)((0, _props.getProps)(this.props), this.state.index, this.preFade), _react["default"].createElement("div", {
-        className: "react-slideshow-fade-wrapper",
+        className: "react-slideshow-fade-wrapper ".concat(cssClass),
         ref: this.wrapper
       }, _react["default"].createElement("div", {
         className: "react-slideshow-fade-images-wrap",
@@ -306,14 +348,14 @@ function (_Component) {
 
       var index = this.state.index;
 
-      var _getProps7 = (0, _props.getProps)(this.props),
-          autoplay = _getProps7.autoplay,
-          children = _getProps7.children,
-          infinite = _getProps7.infinite,
-          duration = _getProps7.duration,
-          transitionDuration = _getProps7.transitionDuration,
-          onChange = _getProps7.onChange,
-          easing = _getProps7.easing;
+      var _getProps9 = (0, _props.getProps)(this.props),
+          autoplay = _getProps9.autoplay,
+          children = _getProps9.children,
+          infinite = _getProps9.infinite,
+          duration = _getProps9.duration,
+          transitionDuration = _getProps9.transitionDuration,
+          onChange = _getProps9.onChange,
+          easing = _getProps9.easing;
 
       var existingTweens = this.tweenGroup.getAll();
 

package/lib/helpers.js

@@ -76,11 +76,12 @@ var showPreviousArrow = function showPreviousArrow(_ref, currentIndex, moveSlide
 
 exports.showPreviousArrow = showPreviousArrow;
 
-var showNextArrow = function showNextArrow(_ref2, currentIndex, moveSlides) {
-  var nextArrow = _ref2.nextArrow,
-      infinite = _ref2.infinite,
-      children = _ref2.children;
-  var isDisabled = currentIndex === children.length - 1 && !infinite;
+var showNextArrow = function showNextArrow(properties, currentIndex, moveSlides) {
+  var nextArrow = properties.nextArrow,
+      infinite = properties.infinite,
+      children = properties.children,
+      slidesToScroll = properties.slidesToScroll;
+  var isDisabled = currentIndex >= children.length - slidesToScroll && !infinite;
   var props = {
     'data-type': 'next',
     'aria-label': 'Next Slide',
@@ -108,39 +109,44 @@ var showNextArrow = function showNextArrow(_ref2, currentIndex, moveSlides) {
 
 exports.showNextArrow = showNextArrow;
 
-var showDefaultIndicator = function showDefaultIndicator(currentIndex, key, indicatorProps) {
+var showDefaultIndicator = function showDefaultIndicator(isCurrentPageActive, key, indicatorProps) {
   return _react["default"].createElement("li", {
     key: key
   }, _react["default"].createElement("button", _extends({
-    className: "each-slideshow-indicator ".concat(currentIndex === key ? 'active' : '')
+    className: "each-slideshow-indicator ".concat(isCurrentPageActive ? 'active' : '')
   }, indicatorProps)));
 };
 
-var showCustomIndicator = function showCustomIndicator(currentIndex, key, indicatorProps, eachIndicator) {
+var showCustomIndicator = function showCustomIndicator(isCurrentPageActive, key, indicatorProps, eachIndicator) {
   return _react["default"].cloneElement(eachIndicator, _objectSpread({
-    className: "".concat(eachIndicator.props.className, " ").concat(currentIndex === key ? 'active' : ''),
+    className: "".concat(eachIndicator.props.className, " ").concat(isCurrentPageActive ? 'active' : ''),
     key: key
   }, indicatorProps));
 };
 
 var showIndicators = function showIndicators(props, currentIndex, navigate) {
   var children = props.children,
-      indicators = props.indicators;
+      indicators = props.indicators,
+      slidesToScroll = props.slidesToScroll;
   var isCustomIndicator = typeof indicators !== 'boolean';
+  var pages = Math.ceil(children.length / slidesToScroll);
   return _react["default"].createElement("ul", {
     className: "indicators"
-  }, children.map(function (_, key) {
+  }, Array.from({
+    length: pages
+  }, function (_, key) {
     var indicatorProps = {
       'data-key': key,
       'aria-label': "Go to slide ".concat(key + 1),
       onClick: navigate
     };
+    var isCurrentPageActive = Math.floor((currentIndex + slidesToScroll - 1) / slidesToScroll) === key;
 
     if (isCustomIndicator) {
-      return showCustomIndicator(currentIndex, key, indicatorProps, indicators(key));
+      return showCustomIndicator(isCurrentPageActive, key, indicatorProps, indicators(key));
     }
 
-    return showDefaultIndicator(currentIndex, key, indicatorProps);
+    return showDefaultIndicator(isCurrentPageActive, key, indicatorProps);
   }));
 };
 

package/lib/props.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.validatePropTypes = exports.propTypes = exports.getProps = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -24,15 +28,16 @@ var defaultProps = {
   pauseOnHover: true,
   scale: 1,
   easing: 'linear',
-  canSwipe: true
+  canSwipe: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  cssClass: ''
 };
 
 var getProps = function getProps(componentProps) {
-  var children = componentProps.children;
-
-  if (!Array.isArray(children)) {
-    children = [children];
-  }
+  var children = _react["default"].Children.map(componentProps.children, function (each) {
+    return each;
+  });
 
   return _objectSpread({}, defaultProps, {}, componentProps, {
     children: children
@@ -54,7 +59,10 @@ var propTypes = {
   nextArrow: ['object', 'function'],
   scale: 'number',
   easing: 'string',
-  canSwipe: 'boolean'
+  canSwipe: 'boolean',
+  slidesToShow: 'number',
+  slidesToScroll: 'number',
+  cssClass: 'string'
 };
 exports.propTypes = propTypes;
 

package/lib/slide.js

@@ -152,14 +152,32 @@ function (_Component) {
     key: "swipe",
     value: function swipe(e) {
       var _getProps4 = (0, _props.getProps)(this.props),
-          canSwipe = _getProps4.canSwipe;
+          canSwipe = _getProps4.canSwipe,
+          slidesToShow = _getProps4.slidesToShow,
+          children = _getProps4.children,
+          infinite = _getProps4.infinite,
+          slidesToScroll = _getProps4.slidesToScroll;
 
       if (canSwipe) {
         var clientX = e.touches ? e.touches[0].pageX : e.clientX;
 
         if (this.dragging) {
-          var translateValue = this.width * (this.state.index + 1);
-          this.distanceSwiped = clientX - this.startingClientX;
+          var translateValue = this.width * (this.state.index + slidesToShow);
+          var distance = clientX - this.startingClientX;
+
+          if (!infinite && this.state.index === children.length - slidesToScroll && distance < 0) {
+            // if it is the last and infinite is false and you're swiping left
+            // then nothing happens
+            return;
+          }
+
+          if (!infinite && this.state.index === 0 && distance > 0) {
+            // if it is the first and infinite is false and you're swiping right
+            // then nothing happens
+            return;
+          }
+
+          this.distanceSwiped = distance;
           translateValue -= this.distanceSwiped;
           this.imageContainer.style.transform = "translate(-".concat(translateValue, "px)");
         }
@@ -177,12 +195,19 @@ function (_Component) {
     value: function setWidth() {
       // the .slice.call was needed to support ie11
       this.allImages = this.wrapper && Array.prototype.slice.call(this.wrapper.querySelectorAll(".images-wrap > div"), 0) || [];
-      this.width = this.wrapper && this.wrapper.clientWidth || 0;
-      var fullwidth = this.width * (_react["default"].Children.count(this.props.children) + 2);
+
+      var _getProps5 = (0, _props.getProps)(this.props),
+          slidesToShow = _getProps5.slidesToShow;
+
+      this.width = (this.wrapper && this.wrapper.clientWidth || 0) / slidesToShow;
+
+      var numberOfSlides = _react["default"].Children.count(this.props.children);
+
+      var fullwidth = this.width * (numberOfSlides + slidesToShow * 2);
 
       if (this.imageContainer) {
         this.imageContainer.style.width = "".concat(fullwidth, "px");
-        this.imageContainer.style.transform = "translate(-".concat(this.width * (this.state.index + 1), "px)");
+        this.imageContainer.style.transform = "translate(-".concat(this.width * (this.state.index + slidesToShow), "px)");
       }
 
       this.applySlideStyle();
@@ -192,10 +217,10 @@ function (_Component) {
     value: function componentDidUpdate(props) {
       var _this4 = this;
 
-      var _getProps5 = (0, _props.getProps)(this.props),
-          autoplay = _getProps5.autoplay,
-          duration = _getProps5.duration,
-          children = _getProps5.children;
+      var _getProps6 = (0, _props.getProps)(this.props),
+          autoplay = _getProps6.autoplay,
+          duration = _getProps6.duration,
+          children = _getProps6.children;
 
       var newProps = (0, _props.getProps)(props);
 
@@ -243,10 +268,10 @@ function (_Component) {
     value: function startSlides() {
       var _this6 = this;
 
-      var _getProps6 = (0, _props.getProps)(this.props),
-          pauseOnHover = _getProps6.pauseOnHover,
-          autoplay = _getProps6.autoplay,
-          duration = _getProps6.duration;
+      var _getProps7 = (0, _props.getProps)(this.props),
+          pauseOnHover = _getProps7.pauseOnHover,
+          autoplay = _getProps7.autoplay,
+          duration = _getProps7.duration;
 
       if (this.dragging) {
         this.endSwipe();
@@ -273,58 +298,123 @@ function (_Component) {
     key: "goToSlide",
     value: function goToSlide(_ref2) {
       var currentTarget = _ref2.currentTarget;
-      this.goTo(parseInt(currentTarget.dataset.key));
+
+      var _getProps8 = (0, _props.getProps)(this.props),
+          slidesToScroll = _getProps8.slidesToScroll;
+
+      this.goTo(parseInt(currentTarget.dataset.key * slidesToScroll));
     }
   }, {
     key: "goTo",
     value: function goTo(index) {
-      this.slideImages(index);
+      this.slideImages(this.calculateIndex(index));
+    }
+  }, {
+    key: "calculateIndex",
+    value: function calculateIndex(nextIndex) {
+      var _getProps9 = (0, _props.getProps)(this.props),
+          children = _getProps9.children,
+          slidesToScroll = _getProps9.slidesToScroll;
+
+      if (nextIndex < children.length && nextIndex + slidesToScroll > children.length) {
+        if ((children.length - slidesToScroll) % slidesToScroll) {
+          return children.length - slidesToScroll;
+        }
+
+        return nextIndex;
+      }
+
+      return nextIndex;
     }
   }, {
     key: "goNext",
     value: function goNext() {
       var index = this.state.index;
 
-      var _getProps7 = (0, _props.getProps)(this.props),
-          children = _getProps7.children,
-          infinite = _getProps7.infinite;
+      var _getProps10 = (0, _props.getProps)(this.props),
+          children = _getProps10.children,
+          infinite = _getProps10.infinite,
+          slidesToScroll = _getProps10.slidesToScroll;
 
-      if (!infinite && index === children.length - 1) {
+      if (!infinite && index === children.length - slidesToScroll) {
         return;
       }
 
-      this.slideImages(index + 1);
+      var nextIndex = this.calculateIndex(index + slidesToScroll);
+      this.slideImages(nextIndex);
     }
   }, {
     key: "goBack",
     value: function goBack() {
       var index = this.state.index;
 
-      var _getProps8 = (0, _props.getProps)(this.props),
-          infinite = _getProps8.infinite;
+      var _getProps11 = (0, _props.getProps)(this.props),
+          infinite = _getProps11.infinite,
+          slidesToScroll = _getProps11.slidesToScroll;
 
       if (!infinite && index === 0) {
         return;
       }
 
-      this.slideImages(index - 1);
+      var previousIndex = index - slidesToScroll;
+
+      if (previousIndex % slidesToScroll) {
+        previousIndex = Math.ceil(previousIndex / slidesToScroll) * slidesToScroll;
+      }
+
+      this.slideImages(previousIndex);
+    }
+  }, {
+    key: "isSlideActive",
+    value: function isSlideActive(key) {
+      var _getProps12 = (0, _props.getProps)(this.props),
+          slidesToShow = _getProps12.slidesToShow;
+
+      return key < this.state.index + slidesToShow && key >= this.state.index;
+    }
+  }, {
+    key: "renderPreceedingSlides",
+    value: function renderPreceedingSlides(children, slidesToShow) {
+      return children.slice(-slidesToShow).map(function (each, index) {
+        return _react["default"].createElement("div", {
+          "data-index": index - slidesToShow,
+          "aria-roledescription": "slide",
+          "aria-hidden": "true",
+          key: index - slidesToShow
+        }, each);
+      });
+    }
+  }, {
+    key: "renderTrailingSlides",
+    value: function renderTrailingSlides(children, slidesToShow) {
+      return children.slice(0, slidesToShow).map(function (each, index) {
+        return _react["default"].createElement("div", {
+          "data-index": children.length + index,
+          "aria-roledescription": "slide",
+          "aria-hidden": "true",
+          key: children.length + index
+        }, each);
+      });
     }
   }, {
     key: "render",
     value: function render() {
       var _this7 = this;
 
-      var _getProps9 = (0, _props.getProps)(this.props),
-          children = _getProps9.children,
-          indicators = _getProps9.indicators,
-          arrows = _getProps9.arrows;
+      var _getProps13 = (0, _props.getProps)(this.props),
+          children = _getProps13.children,
+          indicators = _getProps13.indicators,
+          arrows = _getProps13.arrows,
+          cssClass = _getProps13.cssClass,
+          slidesToShow = _getProps13.slidesToShow;
 
       var unhandledProps = (0, _helpers.getUnhandledProps)(_props.propTypes, this.props);
       var index = this.state.index;
       var style = {
-        transform: "translate(-".concat((index + 1) * this.width, "px)")
+        transform: "translate(-".concat((index + slidesToShow) * this.width, "px)")
       };
       return _react["default"].createElement("div", _extends({
+        dir: "ltr",
         "aria-roledescription": "carousel"
       }, unhandledProps), _react["default"].createElement("div", {
         className: "react-slideshow-container",
@@ -340,7 +430,7 @@ function (_Component) {
         onTouchMove: this.swipe,
         ref: this.reactSlideshowWrapper
       }, arrows && (0, _helpers.showPreviousArrow)((0, _props.getProps)(this.props), this.state.index, this.moveSlides), _react["default"].createElement("div", {
-        className: "react-slideshow-wrapper slide",
+        className: "react-slideshow-wrapper slide ".concat(cssClass),
         ref: function ref(_ref4) {
           return _this7.wrapper = _ref4;
         }
@@ -350,37 +440,33 @@ function (_Component) {
         ref: function ref(_ref3) {
           return _this7.imageContainer = _ref3;
         }
-      }, _react["default"].createElement("div", {
-        "data-index": "-1",
-        "aria-roledescription": "slide",
-        "aria-hidden": "false"
-      }, children[children.length - 1]), children.map(function (each, key) {
+      }, this.renderPreceedingSlides(children, slidesToShow), children.map(function (each, key) {
+        var isSlideActive = _this7.isSlideActive(key);
+
         return _react["default"].createElement("div", {
           "data-index": key,
           key: key,
-          className: key === index ? 'active' : '',
+          className: isSlideActive ? 'active' : '',
           "aria-roledescription": "slide",
-          "aria-hidden": key === index ? 'false' : 'true'
+          "aria-hidden": isSlideActive ? 'false' : 'true'
         }, each);
-      }), _react["default"].createElement("div", {
-        "data-index": "-1",
-        "aria-roledescription": "slide",
-        "aria-hidden": "false"
-      }, children[0]))), arrows && (0, _helpers.showNextArrow)((0, _props.getProps)(this.props), this.state.index, this.moveSlides)), indicators && (0, _helpers.showIndicators)((0, _props.getProps)(this.props), this.state.index, this.goToSlide));
+      }), this.renderTrailingSlides(children, slidesToShow))), arrows && (0, _helpers.showNextArrow)((0, _props.getProps)(this.props), this.state.index, this.moveSlides)), indicators && (0, _helpers.showIndicators)((0, _props.getProps)(this.props), this.state.index, this.goToSlide));
     }
   }, {
     key: "slideImages",
     value: function slideImages(index, animationDuration) {
       var _this8 = this;
 
-      var _getProps10 = (0, _props.getProps)(this.props),
-          children = _getProps10.children,
-          transitionDuration = _getProps10.transitionDuration,
-          autoplay = _getProps10.autoplay,
-          infinite = _getProps10.infinite,
-          duration = _getProps10.duration,
-          onChange = _getProps10.onChange,
-          easing = _getProps10.easing;
+      var _getProps14 = (0, _props.getProps)(this.props),
+          children = _getProps14.children,
+          transitionDuration = _getProps14.transitionDuration,
+          autoplay = _getProps14.autoplay,
+          infinite = _getProps14.infinite,
+          duration = _getProps14.duration,
+          onChange = _getProps14.onChange,
+          easing = _getProps14.easing,
+          slidesToShow = _getProps14.slidesToShow,
+          slidesToScroll = _getProps14.slidesToScroll;
 
       transitionDuration = animationDuration || transitionDuration;
       var existingTweens = this.tweenGroup.getAll();
@@ -388,10 +474,10 @@ function (_Component) {
       if (!existingTweens.length) {
         clearTimeout(this.timeout);
         var value = {
-          margin: -this.width * (this.state.index + 1) + this.distanceSwiped
+          margin: -this.width * (this.state.index + slidesToShow) + this.distanceSwiped
         };
         var tween = new _tween["default"].Tween(value, this.tweenGroup).to({
-          margin: -this.width * (index + 1)
+          margin: -this.width * (index + slidesToShow)
         }, transitionDuration).onUpdate(function (value) {
           if (_this8.imageContainer) {
             _this8.imageContainer.style.transform = "translate(".concat(value.margin, "px)");
@@ -421,7 +507,7 @@ function (_Component) {
           var newIndex = index;
 
           if (newIndex < 0) {
-            newIndex = children.length - 1;
+            newIndex = children.length - slidesToScroll;
           } else if (newIndex >= children.length) {
             newIndex = 0;
           }

package/lib/zoom.js

@@ -66,6 +66,8 @@ function (_Component) {
     _this.tweenGroup = new _tween["default"].Group();
     _this.initResizeObserver = _this.initResizeObserver.bind(_assertThisInitialized(_this));
     _this.reactSlideshowWrapper = (0, _react.createRef)();
+    _this.startSwipe = _this.startSwipe.bind(_assertThisInitialized(_this));
+    _this.endSwipe = _this.endSwipe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -257,28 +259,68 @@ function (_Component) {
         this.goNext();
       }
     }
+  }, {
+    key: "startSwipe",
+    value: function startSwipe(e) {
+      var _getProps6 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps6.canSwipe;
+
+      if (canSwipe) {
+        this.startingClientX = e.touches ? e.touches[0].pageX : e.clientX;
+        clearTimeout(this.timeout);
+        this.dragging = true;
+      }
+    }
+  }, {
+    key: "endSwipe",
+    value: function endSwipe(e) {
+      var clientX = e.changedTouches ? e.changedTouches[0].pageX : e.clientX;
+      var distance = clientX - this.startingClientX;
+
+      var _getProps7 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps7.canSwipe;
+
+      if (canSwipe) {
+        this.dragging = false;
+
+        if (Math.abs(distance) / this.width > 0.2) {
+          if (distance < 0) {
+            this.goNext();
+          } else {
+            this.goBack();
+          }
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this5 = this;
 
-      var _getProps6 = (0, _props.getProps)(this.props),
-          indicators = _getProps6.indicators,
-          arrows = _getProps6.arrows,
-          children = _getProps6.children;
+      var _getProps8 = (0, _props.getProps)(this.props),
+          indicators = _getProps8.indicators,
+          arrows = _getProps8.arrows,
+          children = _getProps8.children,
+          cssClass = _getProps8.cssClass;
 
       var index = this.state.index;
       var unhandledProps = (0, _helpers.getUnhandledProps)(_props.propTypes, this.props);
       return _react["default"].createElement("div", _extends({
+        dir: "ltr",
         "aria-roledescription": "carousel"
       }, unhandledProps), _react["default"].createElement("div", {
         className: "react-slideshow-container",
         onMouseEnter: this.pauseSlides,
         onMouseOver: this.pauseSlides,
         onMouseLeave: this.startSlides,
+        onMouseDown: this.startSwipe,
+        onMouseUp: this.endSwipe,
+        onTouchStart: this.startSwipe,
+        onTouchEnd: this.endSwipe,
+        onTouchCancel: this.endSwipe,
         ref: this.reactSlideshowWrapper
       }, arrows && (0, _helpers.showPreviousArrow)((0, _props.getProps)(this.props), this.state.index, this.preZoom), _react["default"].createElement("div", {
-        className: "react-slideshow-zoom-wrapper",
+        className: "react-slideshow-zoom-wrapper ".concat(cssClass),
         ref: function ref(_ref3) {
           return _this5.wrapper = _ref3;
         }
@@ -307,15 +349,15 @@ function (_Component) {
 
       var index = this.state.index;
 
-      var _getProps7 = (0, _props.getProps)(this.props),
-          children = _getProps7.children,
-          scale = _getProps7.scale,
-          autoplay = _getProps7.autoplay,
-          infinite = _getProps7.infinite,
-          transitionDuration = _getProps7.transitionDuration,
-          duration = _getProps7.duration,
-          onChange = _getProps7.onChange,
-          easing = _getProps7.easing;
+      var _getProps9 = (0, _props.getProps)(this.props),
+          children = _getProps9.children,
+          scale = _getProps9.scale,
+          autoplay = _getProps9.autoplay,
+          infinite = _getProps9.infinite,
+          transitionDuration = _getProps9.transitionDuration,
+          duration = _getProps9.duration,
+          onChange = _getProps9.onChange,
+          easing = _getProps9.easing;
 
       var existingTweens = this.tweenGroup.getAll();
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.4.6",
+  "version": "3.6.0",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [
     "lib",
     "dist"
   ],
-  "homepage": "https://react-slideshow.herokuapp.com",
+  "homepage": "https://react-slideshow-image.netlify.com",
   "npmFileMap": [
     {
       "basePath": "/dist/",
@@ -56,8 +56,8 @@
     "style-loader": "^1.2.1",
     "uglifycss": "0.0.29",
     "webpack": "^4.42.0",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-cli": "^3.3.4",
+    "webpack-dev-server": "^3.7.1"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0",