react-slideshow-image 4.2.0 → 4.3.0

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

@@ -1,19 +1,17 @@
 import React, { useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import TWEEN from '@tweenjs/tween.js';
+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 target;
   };
   return _extends.apply(this, arguments);
@@ -23,7 +21,6 @@ var getStartingIndex = function getStartingIndex(children, defaultIndex) {
   if (defaultIndex && defaultIndex < React.Children.count(children)) {
     return defaultIndex;
   }
-
   return 0;
 };
 var getResponsiveSettings = function getResponsiveSettings(wrapperWidth, responsive) {
@@ -32,28 +29,26 @@ var getResponsiveSettings = function getResponsiveSettings(wrapperWidth, respons
       return each.breakpoint <= wrapperWidth;
     });
   }
-
   return;
 };
 var EASING_METHODS = {
-  linear: TWEEN.Easing.Linear.None,
-  ease: TWEEN.Easing.Quadratic.InOut,
-  'ease-in': TWEEN.Easing.Quadratic.In,
-  'ease-out': TWEEN.Easing.Quadratic.Out,
-  cubic: TWEEN.Easing.Cubic.InOut,
-  'cubic-in': TWEEN.Easing.Cubic.In,
-  'cubic-out': TWEEN.Easing.Cubic.Out
+  linear: Easing.Linear.None,
+  ease: Easing.Quadratic.InOut,
+  'ease-in': Easing.Quadratic.In,
+  'ease-out': Easing.Quadratic.Out,
+  cubic: Easing.Cubic.InOut,
+  'cubic-in': Easing.Cubic.In,
+  'cubic-out': Easing.Cubic.Out
 };
 var getEasing = function getEasing(easeMethod) {
   if (easeMethod) {
     return EASING_METHODS[easeMethod];
   }
-
   return EASING_METHODS.linear;
 };
 var showPreviousArrow = function showPreviousArrow(_ref, currentIndex, moveSlides) {
   var prevArrow = _ref.prevArrow,
-      infinite = _ref.infinite;
+    infinite = _ref.infinite;
   var isDisabled = currentIndex <= 0 && !infinite;
   var props = {
     'data-type': 'prev',
@@ -61,13 +56,11 @@ var showPreviousArrow = function showPreviousArrow(_ref, currentIndex, moveSlide
     disabled: isDisabled,
     onClick: moveSlides
   };
-
   if (prevArrow) {
     return /*#__PURE__*/React.cloneElement(prevArrow, _extends({
       className: (prevArrow.props.className || '') + " nav " + (isDisabled ? 'disabled' : '')
     }, props));
   }
-
   var className = "nav default-nav " + (isDisabled ? 'disabled' : '');
   return /*#__PURE__*/React.createElement("button", Object.assign({
     type: "button",
@@ -82,14 +75,12 @@ var showPreviousArrow = function showPreviousArrow(_ref, currentIndex, moveSlide
 };
 var showNextArrow = function showNextArrow(properties, currentIndex, moveSlides) {
   var nextArrow = properties.nextArrow,
-      infinite = properties.infinite,
-      children = properties.children;
+    infinite = properties.infinite,
+    children = properties.children;
   var slidesToScroll = 1;
-
   if ('slidesToScroll' in properties) {
     slidesToScroll = properties.slidesToScroll || 1;
   }
-
   var isDisabled = currentIndex >= React.Children.count(children) - slidesToScroll && !infinite;
   var props = {
     'data-type': 'next',
@@ -97,13 +88,11 @@ var showNextArrow = function showNextArrow(properties, currentIndex, moveSlides)
     disabled: isDisabled,
     onClick: moveSlides
   };
-
   if (nextArrow) {
     return /*#__PURE__*/React.cloneElement(nextArrow, _extends({
       className: (nextArrow.props.className || '') + " nav " + (isDisabled ? 'disabled' : '')
     }, props));
   }
-
   var className = "nav default-nav " + (isDisabled ? 'disabled' : '');
   return /*#__PURE__*/React.createElement("button", Object.assign({
     type: "button",
@@ -116,7 +105,6 @@ var showNextArrow = function showNextArrow(properties, currentIndex, moveSlides)
     d: "M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
   })));
 };
-
 var showDefaultIndicator = function showDefaultIndicator(isCurrentPageActive, key, indicatorProps) {
   return /*#__PURE__*/React.createElement("li", {
     key: key
@@ -125,25 +113,21 @@ var showDefaultIndicator = function showDefaultIndicator(isCurrentPageActive, ke
     className: "each-slideshow-indicator " + (isCurrentPageActive ? 'active' : '')
   }, indicatorProps)));
 };
-
 var showCustomIndicator = function showCustomIndicator(isCurrentPageActive, key, indicatorProps, eachIndicator) {
   return /*#__PURE__*/React.cloneElement(eachIndicator, _extends({
     className: eachIndicator.props.className + " " + (isCurrentPageActive ? 'active' : ''),
     key: key
   }, indicatorProps));
 };
-
 var showIndicators = function showIndicators(props, currentIndex, navigate, responsiveSettings) {
   var children = props.children,
-      indicators = props.indicators;
+    indicators = props.indicators;
   var slidesToScroll = 1;
-
   if (responsiveSettings) {
     slidesToScroll = responsiveSettings == null ? void 0 : responsiveSettings.settings.slidesToScroll;
   } else if ('slidesToScroll' in props) {
     slidesToScroll = props.slidesToScroll || 1;
   }
-
   var pages = Math.ceil(React.Children.count(children) / slidesToScroll);
   return /*#__PURE__*/React.createElement("ul", {
     className: "indicators"
@@ -156,11 +140,9 @@ var showIndicators = function showIndicators(props, currentIndex, navigate, resp
       onClick: navigate
     };
     var isCurrentPageActive = Math.floor((currentIndex + slidesToScroll - 1) / slidesToScroll) === key;
-
     if (typeof indicators === 'function') {
       return showCustomIndicator(isCurrentPageActive, key, indicatorProps, indicators(key));
     }
-
     return showDefaultIndicator(isCurrentPageActive, key, indicatorProps);
   }));
 };
@@ -182,12 +164,11 @@ var defaultProps = {
 
 var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(getStartingIndex(props.children, props.defaultIndex)),
-      index = _useState[0],
-      setIndex = _useState[1];
-
+    index = _useState[0],
+    setIndex = _useState[1];
   var wrapperRef = useRef(null);
   var innerWrapperRef = useRef(null);
-  var tweenGroup = useRef(new TWEEN.Group());
+  var tweenGroup = useRef(new Group());
   var timeout = useRef();
   var resizeObserver = useRef();
   var childrenCount = useMemo(function () {
@@ -198,10 +179,8 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var wrapperWidth = wrapperRef.current.clientWidth;
       var fullwidth = wrapperWidth * childrenCount;
       innerWrapperRef.current.style.width = fullwidth + "px";
-
       for (var _index = 0; _index < innerWrapperRef.current.children.length; _index++) {
         var eachDiv = innerWrapperRef.current.children[_index];
-
         if (eachDiv) {
           eachDiv.style.width = wrapperWidth + "px";
           eachDiv.style.left = _index * -wrapperWidth + "px";
@@ -221,14 +200,13 @@ 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;
-
+      children = props.children,
+      duration = props.duration,
+      infinite = props.infinite;
     if (autoplay && React.Children.count(children) > 1 && (infinite || index < React.Children.count(children) - 1)) {
       timeout.current = setTimeout(moveNext, duration);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props, index]);
   useEffect(function () {
     initResizeObserver();
@@ -262,92 +240,74 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-
   var removeResizeObserver = function removeResizeObserver() {
     if (resizeObserver.current && wrapperRef.current) {
       resizeObserver.current.unobserve(wrapperRef.current);
     }
   };
-
   var pauseSlides = function pauseSlides() {
     if (props.pauseOnHover) {
       clearTimeout(timeout.current);
     }
   };
-
   var startSlides = function startSlides() {
     var pauseOnHover = props.pauseOnHover,
-        autoplay = props.autoplay,
-        duration = props.duration;
-
+      autoplay = props.autoplay,
+      duration = props.duration;
     if (pauseOnHover && autoplay) {
       timeout.current = setTimeout(function () {
         return moveNext();
       }, duration);
     }
   };
-
   var moveNext = function moveNext() {
     var children = props.children,
-        infinite = props.infinite;
-
+      infinite = props.infinite;
     if (!infinite && index === React.Children.count(children) - 1) {
       return;
     }
-
     transitionSlide((index + 1) % React.Children.count(children));
   };
-
   var moveBack = function moveBack() {
     var children = props.children,
-        infinite = props.infinite;
-
+      infinite = props.infinite;
     if (!infinite && index === 0) {
       return;
     }
-
     transitionSlide(index === 0 ? React.Children.count(children) - 1 : index - 1);
   };
-
   var preTransition = function preTransition(event) {
     var currentTarget = event.currentTarget;
-
     if (currentTarget.dataset.type === 'prev') {
       moveBack();
     } else {
       moveNext();
     }
   };
-
   var animate = function animate() {
     requestAnimationFrame(animate);
     tweenGroup.current.update();
   };
-
   var transitionSlide = function transitionSlide(newIndex) {
     var existingTweens = tweenGroup.current.getAll();
-
     if (!existingTweens.length) {
       var _innerWrapperRef$curr;
-
       if (!((_innerWrapperRef$curr = innerWrapperRef.current) != null && _innerWrapperRef$curr.children[newIndex])) {
         newIndex = 0;
       }
-
       clearTimeout(timeout.current);
       var value = {
         opacity: 0,
         scale: 1
       };
       animate();
-      var tween = new TWEEN.Tween(value, tweenGroup.current).to({
+      var tween = new Tween(value, tweenGroup.current).to({
         opacity: 1,
         scale: props.scale
       }, props.transitionDuration).onUpdate(function (value) {
         if (!innerWrapperRef.current) {
           return;
         }
-
         innerWrapperRef.current.children[newIndex].style.opacity = value.opacity;
         innerWrapperRef.current.children[index].style.opacity = 1 - value.opacity;
         innerWrapperRef.current.children[index].style.transform = "scale(" + value.scale + ")";
@@ -363,7 +323,6 @@ 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);
         }
@@ -371,25 +330,20 @@ var FadeZoom = /*#__PURE__*/React.forwardRef(function (props, ref) {
       tween.start();
     }
   };
-
   var moveTo = function moveTo(gotoIndex) {
     if (gotoIndex !== index) {
       transitionSlide(gotoIndex);
     }
   };
-
   var navigate = function navigate(event) {
     var currentTarget = event.currentTarget;
-
     if (!currentTarget.dataset.key) {
       return;
     }
-
     if (parseInt(currentTarget.dataset.key) !== index) {
       moveTo(parseInt(currentTarget.dataset.key));
     }
   };
-
   return /*#__PURE__*/React.createElement("div", {
     dir: "ltr",
     "aria-roledescription": "carousel"
@@ -438,81 +392,83 @@ Zoom.defaultProps = defaultProps;
 
 var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(getStartingIndex(props.children, props.defaultIndex)),
-      index = _useState[0],
-      setIndex = _useState[1];
-
+    index = _useState[0],
+    setIndex = _useState[1];
   var _useState2 = useState(0),
-      wrapperWidth = _useState2[0],
-      setWrapperWidth = _useState2[1];
-
+    wrapperSize = _useState2[0],
+    setWrapperSize = _useState2[1];
   var wrapperRef = useRef(null);
   var innerWrapperRef = useRef(null);
-  var tweenGroup = useRef(new TWEEN.Group());
+  var tweenGroup = useRef(new Group());
   var responsiveSettings = useMemo(function () {
-    return getResponsiveSettings(wrapperWidth, props.responsive);
-  }, [wrapperWidth, props.responsive]);
+    return getResponsiveSettings(wrapperSize, props.responsive);
+  }, [wrapperSize, props.responsive]);
   var slidesToScroll = useMemo(function () {
     if (responsiveSettings) {
       return responsiveSettings.settings.slidesToScroll;
     }
-
     return props.slidesToScroll || 1;
   }, [responsiveSettings, props.slidesToScroll]);
   var slidesToShow = useMemo(function () {
     if (responsiveSettings) {
       return responsiveSettings.settings.slidesToShow;
     }
-
     return props.slidesToShow || 1;
   }, [responsiveSettings, props.slidesToShow]);
   var childrenCount = useMemo(function () {
     return React.Children.count(props.children);
   }, [props.children]);
-  var eachChildWidth = useMemo(function () {
-    return wrapperWidth / slidesToShow;
-  }, [wrapperWidth, slidesToShow]);
+  var eachChildSize = useMemo(function () {
+    return wrapperSize / slidesToShow;
+  }, [wrapperSize, slidesToShow]);
   var timeout = useRef();
   var resizeObserver = useRef();
-  var startingClientX;
+  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 applyStyle = useCallback(function () {
     if (innerWrapperRef.current) {
-      var fullwidth = wrapperWidth * innerWrapperRef.current.children.length;
-      innerWrapperRef.current.style.width = fullwidth + "px";
-
+      var fullSize = wrapperSize * innerWrapperRef.current.children.length;
+      var attribute = props.vertical ? 'height' : 'width';
+      innerWrapperRef.current.style[attribute] = fullSize + "px";
+      if (props.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) {
-          eachDiv.style.width = eachChildWidth + "px";
+          if (!props.vertical) {
+            eachDiv.style[attribute] = eachChildSize + "px";
+          }
           eachDiv.style.display = "block";
         }
       }
     }
-  }, [wrapperWidth, eachChildWidth]);
+  }, [wrapperSize, eachChildSize]);
   var initResizeObserver = useCallback(function () {
     if (wrapperRef.current) {
       resizeObserver.current = new ResizeObserver(function (entries) {
         if (!entries) return;
-        setWidth();
+        setSize();
       });
       resizeObserver.current.observe(wrapperRef.current);
     }
   }, [wrapperRef]);
   var play = useCallback(function () {
     var autoplay = props.autoplay,
-        infinite = props.infinite,
-        duration = props.duration;
-
+      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
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props, childrenCount, index]);
   useEffect(function () {
     applyStyle();
-  }, [wrapperWidth, applyStyle]);
+  }, [wrapperSize, applyStyle]);
   useEffect(function () {
     initResizeObserver();
     return function () {
@@ -524,7 +480,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     clearTimeout(timeout.current);
     play();
-  }, [index, wrapperWidth, props.autoplay, play]);
+  }, [index, wrapperSize, props.autoplay, play]);
   useImperativeHandle(ref, function () {
     return {
       goNext: function goNext() {
@@ -542,102 +498,80 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-
   var removeResizeObserver = function removeResizeObserver() {
     if (resizeObserver && wrapperRef.current) {
       resizeObserver.current.unobserve(wrapperRef.current);
     }
   };
-
   var pauseSlides = function pauseSlides() {
     if (props.pauseOnHover) {
       clearTimeout(timeout.current);
     }
   };
-
   var swipe = function swipe(event) {
     if (props.canSwipe && dragging) {
-      var clientX;
-
+      var position;
       if (window.TouchEvent && event.nativeEvent instanceof TouchEvent) {
-        clientX = event.nativeEvent.touches[0].pageX;
-      } else if (event.nativeEvent instanceof MouseEvent) {
-        clientX = event.nativeEvent.clientX;
+        position = event.nativeEvent.touches[0][swipePageAttributeType];
+      } else {
+        position = event.nativeEvent[swipeAttributeType];
       }
-
-      if (clientX && startingClientX) {
-        var translateValue = eachChildWidth * (index + getOffset());
-        var distance = clientX - startingClientX;
-
+      if (position && startingSwipePosition) {
+        var translateValue = eachChildSize * (index + getOffset());
+        var distance = position - startingSwipePosition;
         if (!props.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 it is the first and infinite is false and you're swiping right
           // then nothing happens
           return;
         }
-
         distanceSwiped = distance;
         translateValue -= distanceSwiped;
-        innerWrapperRef.current.style.transform = "translate(-" + translateValue + "px)";
+        innerWrapperRef.current.style.transform = translateType + "(-" + translateValue + "px)";
       }
     }
   };
-
   var moveNext = function moveNext() {
     if (!props.infinite && index === childrenCount - slidesToScroll) {
       return;
     }
-
     var nextIndex = calculateIndex(index + slidesToScroll);
     transitionSlide(nextIndex);
   };
-
   var moveBack = function moveBack() {
     if (!props.infinite && index === 0) {
       return;
     }
-
     var previousIndex = index - slidesToScroll;
-
     if (previousIndex % slidesToScroll) {
       previousIndex = Math.ceil(previousIndex / slidesToScroll) * slidesToScroll;
     }
-
     transitionSlide(previousIndex);
   };
-
   var goToSlide = function goToSlide(_ref) {
     var currentTarget = _ref.currentTarget;
-
     if (!currentTarget.dataset.key) {
       return;
     }
-
     var datasetKey = parseInt(currentTarget.dataset.key);
     moveTo(datasetKey * slidesToScroll);
   };
-
   var moveTo = function moveTo(index) {
     transitionSlide(calculateIndex(index));
   };
-
   var calculateIndex = function calculateIndex(nextIndex) {
     if (nextIndex < childrenCount && nextIndex + slidesToScroll > childrenCount) {
       if ((childrenCount - slidesToScroll) % slidesToScroll) {
         return childrenCount - slidesToScroll;
       }
-
       return nextIndex;
     }
-
     return nextIndex;
   };
-
   var startSlides = function startSlides() {
     if (dragging) {
       endSwipe();
@@ -645,17 +579,14 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       timeout.current = setTimeout(moveNext, props.duration);
     }
   };
-
   var moveSlides = function moveSlides(_ref2) {
     var dataset = _ref2.currentTarget.dataset;
-
     if (dataset.type === 'next') {
       moveNext();
     } else {
       moveBack();
     }
   };
-
   var renderPreceedingSlides = function renderPreceedingSlides() {
     return React.Children.toArray(props.children).slice(-slidesToShow).map(function (each, index) {
       return /*#__PURE__*/React.createElement("div", {
@@ -666,12 +597,10 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, each);
     });
   };
-
   var renderTrailingSlides = function renderTrailingSlides() {
     if (!props.infinite && slidesToShow === slidesToScroll) {
       return;
     }
-
     return React.Children.toArray(props.children).slice(0, slidesToShow).map(function (each, index) {
       return /*#__PURE__*/React.createElement("div", {
         "data-index": childrenCount + index,
@@ -681,31 +610,33 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, each);
     });
   };
-
-  var setWidth = function setWidth() {
-    if (wrapperRef.current) {
-      setWrapperWidth(wrapperRef.current.clientWidth);
+  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 (window.TouchEvent && event.nativeEvent instanceof TouchEvent) {
-        startingClientX = event.nativeEvent.touches[0].pageX;
-      } else if (event.nativeEvent instanceof MouseEvent) {
-        startingClientX = event.nativeEvent.clientX;
+        startingSwipePosition = event.nativeEvent.touches[0][swipePageAttributeType];
+      } else {
+        startingSwipePosition = event.nativeEvent[swipeAttributeType];
       }
-
       clearTimeout(timeout.current);
       dragging = true;
     }
   };
-
   var endSwipe = function endSwipe() {
     if (props.canSwipe) {
       dragging = false;
-
-      if (Math.abs(distanceSwiped) / wrapperWidth > 0.2) {
+      if (Math.abs(distanceSwiped) / wrapperSize > 0.2) {
         if (distanceSwiped < 0) {
           moveNext();
         } else {
@@ -718,45 +649,39 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   };
-
   var animate = function animate() {
     requestAnimationFrame(animate);
     tweenGroup.current.update();
   };
-
   var transitionSlide = function transitionSlide(toIndex, animationDuration) {
     var transitionDuration = animationDuration || props.transitionDuration;
     var currentIndex = index;
     var existingTweens = tweenGroup.current.getAll();
-
     if (!wrapperRef.current) {
       return;
     }
-
-    var childWidth = wrapperRef.current.clientWidth / slidesToShow;
-
+    var attribute = props.vertical ? 'clientHeight' : 'clientWidth';
+    var childSize = wrapperRef.current[attribute] / slidesToShow;
     if (!existingTweens.length) {
       clearTimeout(timeout.current);
       var value = {
-        margin: -childWidth * (currentIndex + getOffset()) + distanceSwiped
+        margin: -childSize * (currentIndex + getOffset()) + distanceSwiped
       };
-      var tween = new TWEEN.Tween(value, tweenGroup.current).to({
-        margin: -childWidth * (toIndex + getOffset())
+      var tween = new Tween(value, tweenGroup.current).to({
+        margin: -childSize * (toIndex + getOffset())
       }, transitionDuration).onUpdate(function (value) {
         if (innerWrapperRef.current) {
-          innerWrapperRef.current.style.transform = "translate(" + value.margin + "px)";
+          innerWrapperRef.current.style.transform = translateType + "(" + value.margin + "px)";
         }
       });
       tween.easing(getEasing(props.easing));
       animate();
       var newIndex = toIndex;
-
       if (newIndex < 0) {
         newIndex = childrenCount - slidesToScroll;
       } else if (newIndex >= childrenCount) {
         newIndex = 0;
       }
-
       tween.onStart(function () {
         if (typeof props.onStartChange === 'function') {
           props.onStartChange(index, newIndex);
@@ -764,31 +689,25 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
       tween.onComplete(function () {
         distanceSwiped = 0;
-
         if (typeof props.onChange === 'function') {
           props.onChange(index, newIndex);
         }
-
         setIndex(newIndex);
       });
       tween.start();
     }
   };
-
   var isSlideActive = function isSlideActive(key) {
     return key < index + slidesToShow && key >= index;
   };
-
   var getOffset = function getOffset() {
     if (!props.infinite) {
       return 0;
     }
-
     return slidesToShow;
   };
-
   var style = {
-    transform: "translate(-" + (index + getOffset()) * eachChildWidth + "px)"
+    transform: translateType + "(-" + (index + getOffset()) * eachChildSize + "px)"
   };
   return /*#__PURE__*/React.createElement("div", {
     dir: "ltr",
@@ -809,7 +728,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: "react-slideshow-wrapper slide " + (props.cssClass || ''),
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "images-wrap",
+    className: "images-wrap " + (props.vertical ? 'vertical' : 'horizontal'),
     style: style,
     ref: innerWrapperRef
   }, props.infinite && renderPreceedingSlides(), (React.Children.map(props.children, function (thisArg) {
@@ -823,7 +742,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "aria-roledescription": "slide",
       "aria-hidden": isThisSlideActive ? 'false' : 'true'
     }, each);
-  }), renderTrailingSlides())), props.arrows && showNextArrow(props, index, moveSlides)), props.indicators && showIndicators(props, index, goToSlide, responsiveSettings));
+  }), renderTrailingSlides())), props.arrows && showNextArrow(props, index, moveSlides)), !!props.indicators && showIndicators(props, index, goToSlide, responsiveSettings));
 });
 Slide.defaultProps = defaultProps;