react-slideshow-image 4.3.1 → 4.4.0

package/dist/react-slideshow-image.esm.js

@@ -3,18 +3,22 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { Easing, Group, Tween } from '@tweenjs/tween.js';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
 }
 
 var getStartingIndex = function getStartingIndex(children, defaultIndex) {
@@ -149,33 +153,40 @@ var showIndicators = function showIndicators(props, currentIndex, navigate, resp
   }));
 };
 
-var defaultProps = {
-  duration: 5000,
-  transitionDuration: 1000,
-  defaultIndex: 0,
-  infinite: true,
-  autoplay: true,
-  indicators: false,
-  arrows: true,
-  pauseOnHover: true,
-  easing: 'linear',
-  canSwipe: true,
-  cssClass: '',
-  responsive: []
-};
-
+var _excluded = ["duration", "transitionDuration", "defaultIndex", "infinite", "autoplay", "indicators", "arrows", "pauseOnHover", "easing", "cssClass"];
 var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useState = useState(getStartingIndex(props.children, props.defaultIndex)),
+  var _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 5000 : _props$duration,
+    _props$transitionDura = props.transitionDuration,
+    transitionDuration = _props$transitionDura === void 0 ? 1000 : _props$transitionDura,
+    _props$defaultIndex = props.defaultIndex,
+    defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
+    _props$infinite = props.infinite,
+    infinite = _props$infinite === void 0 ? true : _props$infinite,
+    _props$autoplay = props.autoplay,
+    autoplay = _props$autoplay === void 0 ? true : _props$autoplay,
+    _props$indicators = props.indicators,
+    indicators = _props$indicators === void 0 ? false : _props$indicators,
+    _props$arrows = props.arrows,
+    arrows = _props$arrows === void 0 ? true : _props$arrows,
+    _props$pauseOnHover = props.pauseOnHover,
+    pauseOnHover = _props$pauseOnHover === void 0 ? true : _props$pauseOnHover,
+    _props$easing = props.easing,
+    easing = _props$easing === void 0 ? 'linear' : _props$easing,
+    _props$cssClass = props.cssClass,
+    cssClass = _props$cssClass === void 0 ? '' : _props$cssClass,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useState = useState(getStartingIndex(others.children, defaultIndex)),
     index = _useState[0],
     setIndex = _useState[1];
   var wrapperRef = useRef(null);
   var innerWrapperRef = useRef(null);
   var tweenGroup = useRef(new Group());
-  var timeout = useRef();
-  var resizeObserver = useRef();
+  var timeout = useRef(undefined);
+  var resizeObserver = useRef(undefined);
   var childrenCount = useMemo(function () {
-    return React.Children.count(props.children);
-  }, [props.children]);
+    return React.Children.count(others.children);
+  }, [others.children]);
   var applyStyle = useCallback(function () {
     if (innerWrapperRef.current && wrapperRef.current) {
       var wrapperWidth = wrapperRef.current.clientWidth;
@@ -201,19 +212,16 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [wrapperRef, applyStyle]);
   var play = useCallback(function () {
-    var autoplay = props.autoplay,
-      children = props.children,
-      duration = props.duration,
-      infinite = props.infinite;
-    if (autoplay && React.Children.count(children) > 1 && (infinite || index < React.Children.count(children) - 1)) {
+    if (autoplay && React.Children.count(others.children) > 1 && (infinite || index < React.Children.count(others.children) - 1)) {
       timeout.current = setTimeout(moveNext, duration);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props, index]);
+  }, [autoplay, duration, infinite, others.children, index]);
   useEffect(function () {
     initResizeObserver();
+    var tweenGroupRef = tweenGroup.current;
     return function () {
-      tweenGroup.current.removeAll();
+      tweenGroupRef.removeAll();
       clearTimeout(timeout.current);
       removeResizeObserver();
     };
@@ -221,7 +229,7 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     clearTimeout(timeout.current);
     play();
-  }, [index, props.autoplay, play]);
+  }, [index, autoplay, play]);
   useEffect(function () {
     applyStyle();
   }, [childrenCount, applyStyle]);
@@ -248,14 +256,11 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var pauseSlides = function pauseSlides() {
-    if (props.pauseOnHover) {
+    if (pauseOnHover) {
       clearTimeout(timeout.current);
     }
   };
   var startSlides = function startSlides() {
-    var pauseOnHover = props.pauseOnHover,
-      autoplay = props.autoplay,
-      duration = props.duration;
     if (pauseOnHover && autoplay) {
       timeout.current = setTimeout(function () {
         return moveNext();
@@ -263,20 +268,16 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var moveNext = function moveNext() {
-    var children = props.children,
-      infinite = props.infinite;
-    if (!infinite && index === React.Children.count(children) - 1) {
+    if (!infinite && index === React.Children.count(others.children) - 1) {
       return;
     }
-    transitionSlide((index + 1) % React.Children.count(children));
+    transitionSlide((index + 1) % React.Children.count(others.children));
   };
   var moveBack = function moveBack() {
-    var children = props.children,
-      infinite = props.infinite;
     if (!infinite && index === 0) {
       return;
     }
-    transitionSlide(index === 0 ? React.Children.count(children) - 1 : index - 1);
+    transitionSlide(index === 0 ? React.Children.count(others.children) - 1 : index - 1);
   };
   var preTransition = function preTransition(event) {
     var currentTarget = event.currentTarget;
@@ -286,8 +287,8 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
       moveNext();
     }
   };
-  var animate = function animate() {
-    requestAnimationFrame(animate);
+  var _animate = function animate() {
+    requestAnimationFrame(_animate);
     tweenGroup.current.update();
   };
   var transitionSlide = function transitionSlide(newIndex) {
@@ -302,11 +303,11 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
         opacity: 0,
         scale: 1
       };
-      animate();
+      _animate();
       var tween = new Tween(value, tweenGroup.current).to({
         opacity: 1,
-        scale: props.scale
-      }, props.transitionDuration).onUpdate(function (value) {
+        scale: others.scale
+      }, transitionDuration).onUpdate(function (value) {
         if (!innerWrapperRef.current) {
           return;
         }
@@ -314,10 +315,10 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
         innerWrapperRef.current.children[index].style.opacity = 1 - value.opacity;
         innerWrapperRef.current.children[index].style.transform = "scale(" + value.scale + ")";
       });
-      tween.easing(getEasing(props.easing));
+      tween.easing(getEasing(easing));
       tween.onStart(function () {
-        if (typeof props.onStartChange === 'function') {
-          props.onStartChange(index, newIndex);
+        if (typeof others.onStartChange === 'function') {
+          others.onStartChange(index, newIndex);
         }
       });
       tween.onComplete(function () {
@@ -325,8 +326,8 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
           setIndex(newIndex);
           innerWrapperRef.current.children[index].style.transform = "scale(1)";
         }
-        if (typeof props.onChange === 'function') {
-          props.onChange(index, newIndex);
+        if (typeof others.onChange === 'function') {
+          others.onChange(index, newIndex);
         }
       });
       tween.start();
@@ -350,17 +351,19 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dir: "ltr",
     "aria-roledescription": "carousel"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "react-slideshow-container " + (props.cssClass || ''),
+    className: "react-slideshow-container " + (cssClass || ''),
     onMouseEnter: pauseSlides,
     onMouseOver: pauseSlides,
     onMouseLeave: startSlides
-  }, props.arrows && showPreviousArrow(props, index, preTransition), /*#__PURE__*/React.createElement("div", {
-    className: "react-slideshow-fadezoom-wrapper " + props.cssClass,
+  }, arrows && showPreviousArrow(_extends({}, props, {
+    infinite: infinite
+  }), index, preTransition), /*#__PURE__*/React.createElement("div", {
+    className: "react-slideshow-fadezoom-wrapper " + cssClass,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "react-slideshow-fadezoom-images-wrap",
     ref: innerWrapperRef
-  }, (React.Children.map(props.children, function (thisArg) {
+  }, (React.Children.map(others.children, function (thisArg) {
     return thisArg;
   }) || []).map(function (each, key) {
     return /*#__PURE__*/React.createElement("div", {
@@ -373,27 +376,73 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "aria-roledescription": "slide",
       "aria-hidden": key === index ? 'false' : 'true'
     }, each);
-  }))), props.arrows && showNextArrow(props, index, preTransition)), props.indicators && showIndicators(props, index, navigate));
+  }))), arrows && showNextArrow(_extends({}, props, {
+    infinite: infinite
+  }), index, preTransition)), indicators && showIndicators(_extends({}, props, {
+    indicators: indicators
+  }), index, navigate));
 });
-FadeZoom.defaultProps = defaultProps;
+
+var defaultProps = {
+  duration: 5000,
+  transitionDuration: 1000,
+  defaultIndex: 0,
+  infinite: true,
+  autoplay: true,
+  indicators: false,
+  arrows: true,
+  pauseOnHover: true,
+  easing: 'linear',
+  canSwipe: true,
+  cssClass: ''
+};
 
 var Fade = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(FadeZoom, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(FadeZoom, Object.assign({}, defaultProps, props, {
     scale: 1,
     ref: ref
   }));
 });
-Fade.defaultProps = defaultProps;
 
 var Zoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(FadeZoom, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(FadeZoom, Object.assign({}, defaultProps, props, {
     ref: ref
   }));
 });
-Zoom.defaultProps = defaultProps;
 
+var _excluded$1 = ["duration", "transitionDuration", "defaultIndex", "infinite", "autoplay", "indicators", "arrows", "pauseOnHover", "easing", "canSwipe", "cssClass", "responsive", "slidesToShow", "slidesToScroll"];
 var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useState = useState(getStartingIndex(props.children, props.defaultIndex)),
+  var _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 5000 : _props$duration,
+    _props$transitionDura = props.transitionDuration,
+    transitionDuration = _props$transitionDura === void 0 ? 1000 : _props$transitionDura,
+    _props$defaultIndex = props.defaultIndex,
+    defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
+    _props$infinite = props.infinite,
+    infinite = _props$infinite === void 0 ? true : _props$infinite,
+    _props$autoplay = props.autoplay,
+    autoplay = _props$autoplay === void 0 ? true : _props$autoplay,
+    _props$indicators = props.indicators,
+    indicators = _props$indicators === void 0 ? false : _props$indicators,
+    _props$arrows = props.arrows,
+    arrows = _props$arrows === void 0 ? true : _props$arrows,
+    _props$pauseOnHover = props.pauseOnHover,
+    pauseOnHover = _props$pauseOnHover === void 0 ? true : _props$pauseOnHover,
+    _props$easing = props.easing,
+    easing = _props$easing === void 0 ? 'linear' : _props$easing,
+    _props$canSwipe = props.canSwipe,
+    canSwipe = _props$canSwipe === void 0 ? true : _props$canSwipe,
+    _props$cssClass = props.cssClass,
+    cssClass = _props$cssClass === void 0 ? '' : _props$cssClass,
+    _props$responsive = props.responsive,
+    responsive = _props$responsive === void 0 ? [] : _props$responsive,
+    _props$slidesToShow = props.slidesToShow,
+    slidesToShowDefault = _props$slidesToShow === void 0 ? 1 : _props$slidesToShow,
+    _props$slidesToScroll = props.slidesToScroll,
+    slidesToScrollDefault = _props$slidesToScroll === void 0 ? 1 : _props$slidesToScroll,
+    others = _objectWithoutPropertiesLoose(props, _excluded$1);
+  var newTransitionDuration = transitionDuration;
+  var _useState = useState(getStartingIndex(others.children, defaultIndex)),
     index = _useState[0],
     setIndex = _useState[1];
   var _useState2 = useState(0),
@@ -403,53 +452,65 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var innerWrapperRef = useRef(null);
   var tweenGroup = useRef(new Group());
   var responsiveSettings = useMemo(function () {
-    return getResponsiveSettings(wrapperSize, props.responsive);
-  }, [wrapperSize, props.responsive]);
+    return getResponsiveSettings(wrapperSize, responsive);
+  }, [wrapperSize, responsive]);
   var slidesToScroll = useMemo(function () {
     if (responsiveSettings) {
       return responsiveSettings.settings.slidesToScroll;
     }
-    return props.slidesToScroll || 1;
-  }, [responsiveSettings, props.slidesToScroll]);
+    return slidesToScrollDefault;
+  }, [responsiveSettings, slidesToScrollDefault]);
   var slidesToShow = useMemo(function () {
     if (responsiveSettings) {
       return responsiveSettings.settings.slidesToShow;
     }
-    return props.slidesToShow || 1;
-  }, [responsiveSettings, props.slidesToShow]);
+    return slidesToShowDefault;
+  }, [responsiveSettings, slidesToShowDefault]);
   var childrenCount = useMemo(function () {
-    return React.Children.count(props.children);
-  }, [props.children]);
+    return React.Children.count(others.children);
+  }, [others.children]);
   var eachChildSize = useMemo(function () {
     return wrapperSize / slidesToShow;
   }, [wrapperSize, slidesToShow]);
-  var timeout = useRef();
-  var resizeObserver = useRef();
+  var timeout = useRef(undefined);
+  var resizeObserver = useRef(undefined);
   var startingSwipePosition;
   var dragging = false;
   var distanceSwiped = 0;
-  var translateType = props.vertical ? 'translateY' : 'translateX';
-  var swipeAttributeType = props.vertical ? 'clientY' : 'clientX';
-  var swipePageAttributeType = props.vertical ? 'pageY' : 'pageX';
+  var translateType = others.vertical ? 'translateY' : 'translateX';
+  var swipeAttributeType = others.vertical ? 'clientY' : 'clientX';
+  var swipePageAttributeType = others.vertical ? 'pageY' : 'pageX';
   var applyStyle = useCallback(function () {
     if (innerWrapperRef.current) {
       var fullSize = wrapperSize * innerWrapperRef.current.children.length;
-      var attribute = props.vertical ? 'height' : 'width';
+      var attribute = others.vertical ? 'height' : 'width';
       innerWrapperRef.current.style[attribute] = fullSize + "px";
-      if (props.vertical && wrapperRef.current) {
+      if (others.vertical && wrapperRef.current) {
         wrapperRef.current.style[attribute] = wrapperSize + "px";
       }
       for (var _index = 0; _index < innerWrapperRef.current.children.length; _index++) {
         var eachDiv = innerWrapperRef.current.children[_index];
         if (eachDiv) {
-          if (!props.vertical) {
+          if (!others.vertical) {
             eachDiv.style[attribute] = eachChildSize + "px";
           }
           eachDiv.style.display = "block";
         }
       }
     }
-  }, [wrapperSize, eachChildSize]);
+  }, [wrapperSize, eachChildSize, others.vertical]);
+  var setSize = useCallback(function () {
+    var attribute = others.vertical ? 'clientHeight' : 'clientWidth';
+    if (others.vertical) {
+      if (innerWrapperRef.current) {
+        setWrapperSize(innerWrapperRef.current.children[0][attribute]);
+      }
+    } else {
+      if (wrapperRef.current) {
+        setWrapperSize(wrapperRef.current[attribute]);
+      }
+    }
+  }, [others.vertical]);
   var initResizeObserver = useCallback(function () {
     if (wrapperRef.current) {
       resizeObserver.current = new ResizeObserver(function (entries) {
@@ -458,23 +519,21 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
       resizeObserver.current.observe(wrapperRef.current);
     }
-  }, [wrapperRef]);
+  }, [wrapperRef, setSize]);
   var play = useCallback(function () {
-    var autoplay = props.autoplay,
-      infinite = props.infinite,
-      duration = props.duration;
     if (autoplay && (infinite || index < childrenCount - 1)) {
       timeout.current = setTimeout(moveNext, duration);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props, childrenCount, index]);
+  }, [autoplay, infinite, duration, childrenCount, index]);
   useEffect(function () {
     applyStyle();
   }, [wrapperSize, applyStyle]);
   useEffect(function () {
     initResizeObserver();
+    var tweenGroupRef = tweenGroup.current;
     return function () {
-      tweenGroup.current.removeAll();
+      tweenGroupRef.removeAll();
       clearTimeout(timeout.current);
       removeResizeObserver();
     };
@@ -482,7 +541,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     clearTimeout(timeout.current);
     play();
-  }, [index, wrapperSize, props.autoplay, play]);
+  }, [index, wrapperSize, autoplay, play]);
   useImperativeHandle(ref, function () {
     return {
       goNext: function goNext() {
@@ -506,12 +565,12 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var pauseSlides = function pauseSlides() {
-    if (props.pauseOnHover) {
+    if (pauseOnHover) {
       clearTimeout(timeout.current);
     }
   };
   var swipe = function swipe(event) {
-    if (props.canSwipe && dragging) {
+    if (canSwipe && dragging) {
       var position;
       if (window.TouchEvent && event.nativeEvent instanceof TouchEvent) {
         position = event.nativeEvent.touches[0][swipePageAttributeType];
@@ -521,12 +580,12 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (position && startingSwipePosition) {
         var translateValue = eachChildSize * (index + getOffset());
         var distance = position - startingSwipePosition;
-        if (!props.infinite && index === childrenCount - slidesToScroll && distance < 0) {
+        if (!infinite && index === childrenCount - slidesToScroll && distance < 0) {
           // if it is the last and infinite is false and you're swiping left
           // then nothing happens
           return;
         }
-        if (!props.infinite && index === 0 && distance > 0) {
+        if (!infinite && index === 0 && distance > 0) {
           // if it is the first and infinite is false and you're swiping right
           // then nothing happens
           return;
@@ -538,14 +597,14 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var moveNext = function moveNext() {
-    if (!props.infinite && index === childrenCount - slidesToScroll) {
+    if (!infinite && index === childrenCount - slidesToScroll) {
       return;
     }
     var nextIndex = calculateIndex(index + slidesToScroll);
     transitionSlide(nextIndex);
   };
   var moveBack = function moveBack() {
-    if (!props.infinite && index === 0) {
+    if (!infinite && index === 0) {
       return;
     }
     var previousIndex = index - slidesToScroll;
@@ -577,8 +636,8 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var startSlides = function startSlides() {
     if (dragging) {
       endSwipe();
-    } else if (props.pauseOnHover && props.autoplay) {
-      timeout.current = setTimeout(moveNext, props.duration);
+    } else if (pauseOnHover && autoplay) {
+      timeout.current = setTimeout(moveNext, duration);
     }
   };
   var moveSlides = function moveSlides(_ref2) {
@@ -590,7 +649,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var renderPreceedingSlides = function renderPreceedingSlides() {
-    return React.Children.toArray(props.children).slice(-slidesToShow).map(function (each, index) {
+    return React.Children.toArray(others.children).slice(-slidesToShow).map(function (each, index) {
       return /*#__PURE__*/React.createElement("div", {
         "data-index": index - slidesToShow,
         "aria-roledescription": "slide",
@@ -600,10 +659,10 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   };
   var renderTrailingSlides = function renderTrailingSlides() {
-    if (!props.infinite && slidesToShow === slidesToScroll) {
+    if (!infinite && slidesToShow === slidesToScroll) {
       return;
     }
-    return React.Children.toArray(props.children).slice(0, slidesToShow).map(function (each, index) {
+    return React.Children.toArray(others.children).slice(0, slidesToShow).map(function (each, index) {
       return /*#__PURE__*/React.createElement("div", {
         "data-index": childrenCount + index,
         "aria-roledescription": "slide",
@@ -612,20 +671,8 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, each);
     });
   };
-  var setSize = function setSize() {
-    var attribute = props.vertical ? 'clientHeight' : 'clientWidth';
-    if (props.vertical) {
-      if (innerWrapperRef.current) {
-        setWrapperSize(innerWrapperRef.current.children[0][attribute]);
-      }
-    } else {
-      if (wrapperRef.current) {
-        setWrapperSize(wrapperRef.current[attribute]);
-      }
-    }
-  };
   var startSwipe = function startSwipe(event) {
-    if (props.canSwipe) {
+    if (canSwipe) {
       if (window.TouchEvent && event.nativeEvent instanceof TouchEvent) {
         startingSwipePosition = event.nativeEvent.touches[0][swipePageAttributeType];
       } else {
@@ -636,7 +683,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var endSwipe = function endSwipe() {
-    if (props.canSwipe) {
+    if (canSwipe) {
       dragging = false;
       if (Math.abs(distanceSwiped) / wrapperSize > 0.2) {
         if (distanceSwiped < 0) {
@@ -651,18 +698,18 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   };
-  var animate = function animate() {
-    requestAnimationFrame(animate);
+  var _animate = function animate() {
+    requestAnimationFrame(_animate);
     tweenGroup.current.update();
   };
   var transitionSlide = function transitionSlide(toIndex, animationDuration) {
-    var transitionDuration = animationDuration || props.transitionDuration;
+    var transitionDuration = animationDuration || newTransitionDuration;
     var currentIndex = index;
     var existingTweens = tweenGroup.current.getAll();
     if (!wrapperRef.current) {
       return;
     }
-    var attribute = props.vertical ? 'clientHeight' : 'clientWidth';
+    var attribute = others.vertical ? 'clientHeight' : 'clientWidth';
     var childSize = wrapperRef.current[attribute] / slidesToShow;
     if (!existingTweens.length) {
       clearTimeout(timeout.current);
@@ -676,8 +723,8 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
           innerWrapperRef.current.style.transform = translateType + "(" + value.margin + "px)";
         }
       });
-      tween.easing(getEasing(props.easing));
-      animate();
+      tween.easing(getEasing(easing));
+      _animate();
       var newIndex = toIndex;
       if (newIndex < 0) {
         newIndex = childrenCount - slidesToScroll;
@@ -685,14 +732,14 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
         newIndex = 0;
       }
       tween.onStart(function () {
-        if (typeof props.onStartChange === 'function') {
-          props.onStartChange(index, newIndex);
+        if (typeof others.onStartChange === 'function') {
+          others.onStartChange(index, newIndex);
         }
       });
       tween.onComplete(function () {
         distanceSwiped = 0;
-        if (typeof props.onChange === 'function') {
-          props.onChange(index, newIndex);
+        if (typeof others.onChange === 'function') {
+          others.onChange(index, newIndex);
         }
         setIndex(newIndex);
       });
@@ -703,7 +750,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return key < index + slidesToShow && key >= index;
   };
   var getOffset = function getOffset() {
-    if (!props.infinite) {
+    if (!infinite) {
       return 0;
     }
     return slidesToShow;
@@ -726,14 +773,16 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onTouchEnd: endSwipe,
     onTouchCancel: endSwipe,
     onTouchMove: swipe
-  }, props.arrows && showPreviousArrow(props, index, moveSlides), /*#__PURE__*/React.createElement("div", {
-    className: "react-slideshow-wrapper slide " + (props.cssClass || ''),
+  }, arrows && showPreviousArrow(_extends({}, props, {
+    infinite: infinite
+  }), index, moveSlides), /*#__PURE__*/React.createElement("div", {
+    className: "react-slideshow-wrapper slide " + (cssClass || ''),
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "images-wrap " + (props.vertical ? 'vertical' : 'horizontal'),
+    className: "images-wrap " + (others.vertical ? 'vertical' : 'horizontal'),
     style: style,
     ref: innerWrapperRef
-  }, props.infinite && renderPreceedingSlides(), (React.Children.map(props.children, function (thisArg) {
+  }, infinite && renderPreceedingSlides(), (React.Children.map(others.children, function (thisArg) {
     return thisArg;
   }) || []).map(function (each, key) {
     var isThisSlideActive = isSlideActive(key);
@@ -744,9 +793,12 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "aria-roledescription": "slide",
       "aria-hidden": isThisSlideActive ? 'false' : 'true'
     }, each);
-  }), renderTrailingSlides())), props.arrows && showNextArrow(props, index, moveSlides, responsiveSettings)), !!props.indicators && showIndicators(props, index, goToSlide, responsiveSettings));
+  }), renderTrailingSlides())), arrows && showNextArrow(_extends({}, props, {
+    infinite: infinite
+  }), index, moveSlides, responsiveSettings)), !!indicators && showIndicators(_extends({}, props, {
+    indicators: indicators
+  }), index, goToSlide, responsiveSettings));
 });
-Slide.defaultProps = defaultProps;
 
 export { Fade, Slide, Zoom };
 //# sourceMappingURL=react-slideshow-image.esm.js.map