react-slideshow-image - npm Package Compare versions

Comparing version 4.2.1 to 4.3.0

dist/helpers.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ButtonClick, FadeProps, Responsive, SlideProps, TweenEasingFn, ZoomProps } from './types';
@@ -7,3 +7,3 @@ export declare const getStartingIndex: (children: ReactNode, defaultIndex?: number | undefined) => number;
 export declare const showPreviousArrow: ({ prevArrow, infinite }: FadeProps | SlideProps | ZoomProps, currentIndex: number, moveSlides: ButtonClick) => ReactNode;
-export declare const showNextArrow: (properties: FadeProps | SlideProps | ZoomProps, currentIndex: number, moveSlides: ButtonClick) => JSX.Element;
+export declare const showNextArrow: (properties: FadeProps | SlideProps | ZoomProps, currentIndex: number, moveSlides: ButtonClick) => React.JSX.Element;
 export declare const showIndicators: (props: FadeProps | SlideProps | ZoomProps, currentIndex: number, navigate: ButtonClick, responsiveSettings?: Responsive | undefined) => ReactNode;

dist/react-slideshow-image.cjs.development.js

@@ -16,3 +16,2 @@ 'use strict';
       var source = arguments[i];
-
       for (var key in source) {
@@ -24,3 +23,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -35,3 +33,2 @@ };
   }
-
   return 0;
@@ -45,3 +42,2 @@ };
   }
-
   return;
@@ -62,3 +58,2 @@ };
   }
-
   return EASING_METHODS.linear;
@@ -68,3 +63,3 @@ };
   var prevArrow = _ref.prevArrow,
-      infinite = _ref.infinite;
+    infinite = _ref.infinite;
   var isDisabled = currentIndex <= 0 && !infinite;
@@ -77,3 +72,2 @@ var props = {
   };
-
   if (prevArrow) {
@@ -84,3 +78,2 @@ return /*#__PURE__*/React__default.cloneElement(prevArrow, _extends({
   }
-
   var className = "nav default-nav " + (isDisabled ? 'disabled' : '');
@@ -100,10 +93,8 @@ return /*#__PURE__*/React__default.createElement("button", Object.assign({
   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__default.Children.count(children) - slidesToScroll && !infinite;
@@ -116,3 +107,2 @@ var props = {
   };
-
   if (nextArrow) {
@@ -123,3 +113,2 @@ return /*#__PURE__*/React__default.cloneElement(nextArrow, _extends({
   }
-
   var className = "nav default-nav " + (isDisabled ? 'disabled' : '');
@@ -137,3 +126,2 @@ return /*#__PURE__*/React__default.createElement("button", Object.assign({
 };
-
 var showDefaultIndicator = function showDefaultIndicator(isCurrentPageActive, key, indicatorProps) {
@@ -147,3 +135,2 @@ return /*#__PURE__*/React__default.createElement("li", {
 };
-
 var showCustomIndicator = function showCustomIndicator(isCurrentPageActive, key, indicatorProps, eachIndicator) {
@@ -155,8 +142,6 @@ return /*#__PURE__*/React__default.cloneElement(eachIndicator, _extends({
 };
-
 var showIndicators = function showIndicators(props, currentIndex, navigate, responsiveSettings) {
   var children = props.children,
-      indicators = props.indicators;
+    indicators = props.indicators;
   var slidesToScroll = 1;
-
   if (responsiveSettings) {
@@ -167,3 +152,2 @@ slidesToScroll = responsiveSettings == null ? void 0 : responsiveSettings.settings.slidesToScroll;
   }
-
   var pages = Math.ceil(React__default.Children.count(children) / slidesToScroll);
@@ -181,7 +165,5 @@ return /*#__PURE__*/React__default.createElement("ul", {
     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);
@@ -208,5 +190,4 @@ }));
   var _useState = React.useState(getStartingIndex(props.children, props.defaultIndex)),
-      index = _useState[0],
-      setIndex = _useState[1];
-
+    index = _useState[0],
+    setIndex = _useState[1];
   var wrapperRef = React.useRef(null);
@@ -225,6 +206,4 @@ var innerWrapperRef = React.useRef(null);
       innerWrapperRef.current.style.width = fullwidth + "px";
-
       for (var _index = 0; _index < innerWrapperRef.current.children.length; _index++) {
         var eachDiv = innerWrapperRef.current.children[_index];
-
         if (eachDiv) {
@@ -249,10 +228,9 @@ eachDiv.style.width = wrapperWidth + "px";
     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__default.Children.count(children) > 1 && (infinite || index < React__default.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]);
@@ -291,3 +269,2 @@ React.useEffect(function () {
   });
-
   var removeResizeObserver = function removeResizeObserver() {
@@ -298,3 +275,2 @@ if (resizeObserver.current && wrapperRef.current) {
   };
-
   var pauseSlides = function pauseSlides() {
@@ -305,8 +281,6 @@ if (props.pauseOnHover) {
   };
-
   var startSlides = function startSlides() {
     var pauseOnHover = props.pauseOnHover,
-        autoplay = props.autoplay,
-        duration = props.duration;
-
+      autoplay = props.autoplay,
+      duration = props.duration;
     if (pauseOnHover && autoplay) {
@@ -318,28 +292,20 @@ timeout.current = setTimeout(function () {
   };
-
   var moveNext = function moveNext() {
     var children = props.children,
-        infinite = props.infinite;
-
+      infinite = props.infinite;
     if (!infinite && index === React__default.Children.count(children) - 1) {
       return;
     }
-
     transitionSlide((index + 1) % React__default.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__default.Children.count(children) - 1 : index - 1);
   };
-
   var preTransition = function preTransition(event) {
     var currentTarget = event.currentTarget;
-
     if (currentTarget.dataset.type === 'prev') {
@@ -351,3 +317,2 @@ moveBack();
   };
-
   var animate = function animate() {
@@ -357,13 +322,9 @@ requestAnimationFrame(animate);
   };
-
   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);
@@ -382,3 +343,2 @@ var value = {
         }
-
         innerWrapperRef.current.children[newIndex].style.opacity = value.opacity;
@@ -399,3 +359,2 @@ innerWrapperRef.current.children[index].style.opacity = 1 - value.opacity;
         }
-
         if (typeof props.onChange === 'function') {
@@ -408,3 +367,2 @@ props.onChange(index, newIndex);
   };
-
   var moveTo = function moveTo(gotoIndex) {
@@ -415,10 +373,7 @@ if (gotoIndex !== index) {
   };
-
   var navigate = function navigate(event) {
     var currentTarget = event.currentTarget;
-
     if (!currentTarget.dataset.key) {
       return;
     }
-
     if (parseInt(currentTarget.dataset.key) !== index) {
@@ -428,3 +383,2 @@ moveTo(parseInt(currentTarget.dataset.key));
   };
-
   return /*#__PURE__*/React__default.createElement("div", {
@@ -478,9 +432,7 @@ dir: "ltr",
   var _useState = React.useState(getStartingIndex(props.children, props.defaultIndex)),
-      index = _useState[0],
-      setIndex = _useState[1];
-
+    index = _useState[0],
+    setIndex = _useState[1];
   var _useState2 = React.useState(0),
-      wrapperWidth = _useState2[0],
-      setWrapperWidth = _useState2[1];
-
+    wrapperSize = _useState2[0],
+    setWrapperSize = _useState2[1];
   var wrapperRef = React.useRef(null);
@@ -490,4 +442,4 @@ var innerWrapperRef = React.useRef(null);
   var responsiveSettings = React.useMemo(function () {
-    return getResponsiveSettings(wrapperWidth, props.responsive);
-  }, [wrapperWidth, props.responsive]);
+    return getResponsiveSettings(wrapperSize, props.responsive);
+  }, [wrapperSize, props.responsive]);
   var slidesToScroll = React.useMemo(function () {
@@ -497,3 +449,2 @@ if (responsiveSettings) {
     }
-
     return props.slidesToScroll || 1;
@@ -505,3 +456,2 @@ }, [responsiveSettings, props.slidesToScroll]);
     }
-
     return props.slidesToShow || 1;
@@ -512,20 +462,27 @@ }, [responsiveSettings, props.slidesToShow]);
   }, [props.children]);
-  var eachChildWidth = React.useMemo(function () {
-    return wrapperWidth / slidesToShow;
-  }, [wrapperWidth, slidesToShow]);
+  var eachChildSize = React.useMemo(function () {
+    return wrapperSize / slidesToShow;
+  }, [wrapperSize, slidesToShow]);
   var timeout = React.useRef();
   var resizeObserver = React.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 = React.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";
@@ -535,3 +492,3 @@ }
     }
-  }, [wrapperWidth, eachChildWidth]);
+  }, [wrapperSize, eachChildSize]);
   var initResizeObserver = React.useCallback(function () {
@@ -541,3 +498,3 @@ if (wrapperRef.current) {
         if (!entries) return;
-        setWidth();
+        setSize();
       });
@@ -549,13 +506,12 @@ resizeObserver.current.observe(wrapperRef.current);
     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]);
   React.useEffect(function () {
     applyStyle();
-  }, [wrapperWidth, applyStyle]);
+  }, [wrapperSize, applyStyle]);
   React.useEffect(function () {
@@ -572,3 +528,3 @@ initResizeObserver();
     play();
-  }, [index, wrapperWidth, props.autoplay, play]);
+  }, [index, wrapperSize, props.autoplay, play]);
   React.useImperativeHandle(ref, function () {
@@ -591,3 +547,2 @@ return {
   });
-
   var removeResizeObserver = function removeResizeObserver() {
@@ -598,3 +553,2 @@ if (resizeObserver && wrapperRef.current) {
   };
-
   var pauseSlides = function pauseSlides() {
@@ -605,17 +559,13 @@ if (props.pauseOnHover) {
   };
-
   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) {
@@ -626,3 +576,2 @@ // if it is the last and infinite is false and you're swiping left
         }
-
         if (!props.infinite && index === 0 && distance > 0) {
@@ -633,10 +582,8 @@ // if it is the first and infinite is false and you're swiping right
         }
-
         distanceSwiped = distance;
         translateValue -= distanceSwiped;
-        innerWrapperRef.current.style.transform = "translate(-" + translateValue + "px)";
+        innerWrapperRef.current.style.transform = translateType + "(-" + translateValue + "px)";
       }
     }
   };
-
   var moveNext = function moveNext() {
@@ -646,7 +593,5 @@ if (!props.infinite && index === childrenCount - slidesToScroll) {
     }
-
     var nextIndex = calculateIndex(index + slidesToScroll);
     transitionSlide(nextIndex);
   };
-
   var moveBack = function moveBack() {
@@ -656,27 +601,19 @@ if (!props.infinite && index === 0) {
     }
-
     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) {
@@ -687,9 +624,6 @@ if (nextIndex < childrenCount && nextIndex + slidesToScroll > childrenCount) {
       }
-
       return nextIndex;
     }
-
     return nextIndex;
   };
-
   var startSlides = function startSlides() {
@@ -702,6 +636,4 @@ if (dragging) {
   };
-
   var moveSlides = function moveSlides(_ref2) {
     var dataset = _ref2.currentTarget.dataset;
-
     if (dataset.type === 'next') {
@@ -713,3 +645,2 @@ moveNext();
   };
-
   var renderPreceedingSlides = function renderPreceedingSlides() {
@@ -725,3 +656,2 @@ return React__default.Children.toArray(props.children).slice(-slidesToShow).map(function (each, index) {
   };
-
   var renderTrailingSlides = function renderTrailingSlides() {
@@ -731,3 +661,2 @@ if (!props.infinite && slidesToShow === slidesToScroll) {
     }
-
     return React__default.Children.toArray(props.children).slice(0, slidesToShow).map(function (each, index) {
@@ -742,17 +671,21 @@ return /*#__PURE__*/React__default.createElement("div", {
   };
-
-  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);
@@ -762,8 +695,6 @@ 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) {
@@ -781,3 +712,2 @@ moveNext();
   };
-
   var animate = function animate() {
@@ -787,3 +717,2 @@ requestAnimationFrame(animate);
   };
-
   var transitionSlide = function transitionSlide(toIndex, animationDuration) {
@@ -793,19 +722,17 @@ var transitionDuration = animationDuration || props.transitionDuration;
     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_js.Tween(value, tweenGroup.current).to({
-        margin: -childWidth * (toIndex + getOffset())
+        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)";
         }
@@ -816,3 +743,2 @@ });
       var newIndex = toIndex;
-
       if (newIndex < 0) {
@@ -823,3 +749,2 @@ newIndex = childrenCount - slidesToScroll;
       }
-
       tween.onStart(function () {
@@ -832,7 +757,5 @@ if (typeof props.onStartChange === 'function') {
         distanceSwiped = 0;
-
         if (typeof props.onChange === 'function') {
           props.onChange(index, newIndex);
         }
-
         setIndex(newIndex);
@@ -843,7 +766,5 @@ });
   };
-
   var isSlideActive = function isSlideActive(key) {
     return key < index + slidesToShow && key >= index;
   };
-
   var getOffset = function getOffset() {
@@ -853,8 +774,6 @@ if (!props.infinite) {
     }
-
     return slidesToShow;
   };
-
   var style = {
-    transform: "translate(-" + (index + getOffset()) * eachChildWidth + "px)"
+    transform: translateType + "(-" + (index + getOffset()) * eachChildSize + "px)"
   };
@@ -880,3 +799,3 @@ return /*#__PURE__*/React__default.createElement("div", {
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "images-wrap",
+    className: "images-wrap " + (props.vertical ? 'vertical' : 'horizontal'),
     style: style,
@@ -895,3 +814,3 @@ ref: innerWrapperRef
     }, 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));
 });
@@ -898,0 +817,0 @@ Slide.defaultProps = defaultProps;

dist/react-slideshow-image.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=e(require("resize-observer-polyfill")),i=require("@tweenjs/tween.js");function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var c=function(e,n){return n&&n<t.Children.count(e)?n:0},o={linear:i.Easing.Linear.None,ease:i.Easing.Quadratic.InOut,"ease-in":i.Easing.Quadratic.In,"ease-out":i.Easing.Quadratic.Out,cubic:i.Easing.Cubic.InOut,"cubic-in":i.Easing.Cubic.In,"cubic-out":i.Easing.Cubic.Out},u=function(e){return e?o[e]:o.linear},s=function(e,n,r){var i=e.prevArrow,c=n<=0&&!e.infinite,o={"data-type":"prev","aria-label":"Previous Slide",disabled:c,onClick:r};return i?t.cloneElement(i,a({className:(i.props.className||"")+" nav "+(c?"disabled":"")},o)):t.createElement("button",Object.assign({type:"button",className:"nav default-nav "+(c?"disabled":"")},o),t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},t.createElement("path",{d:"M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"})))},l=function(e,n,r){var i=e.nextArrow,c=e.infinite,o=1;"slidesToScroll"in e&&(o=e.slidesToScroll||1);var u=n>=t.Children.count(e.children)-o&&!c,s={"data-type":"next","aria-label":"Next Slide",disabled:u,onClick:r};return i?t.cloneElement(i,a({className:(i.props.className||"")+" nav "+(u?"disabled":"")},s)):t.createElement("button",Object.assign({type:"button",className:"nav default-nav "+(u?"disabled":"")},s),t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},t.createElement("path",{d:"M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"})))},f=function(e,n,r,i){var c=e.indicators,o=1;i?o=null==i?void 0:i.settings.slidesToScroll:"slidesToScroll"in e&&(o=e.slidesToScroll||1);var u=Math.ceil(t.Children.count(e.children)/o);return t.createElement("ul",{className:"indicators"},Array.from({length:u},(function(e,i){var u={"data-key":i,"aria-label":"Go to slide "+(i+1),onClick:r},s=Math.floor((n+o-1)/o)===i;return"function"==typeof c?function(e,n,r,i){return t.cloneElement(i,a({className:i.props.className+" "+(e?"active":""),key:n},r))}(s,i,u,c(i)):function(e,n,r){return t.createElement("li",{key:n},t.createElement("button",Object.assign({type:"button",className:"each-slideshow-indicator "+(e?"active":"")},r)))}(s,i,u)})))},d={duration:5e3,transitionDuration:1e3,defaultIndex:0,infinite:!0,autoplay:!0,indicators:!1,arrows:!0,pauseOnHover:!0,easing:"linear",canSwipe:!0,cssClass:"",responsive:[]},v=t.forwardRef((function(e,a){var o=n.useState(c(e.children,e.defaultIndex)),d=o[0],v=o[1],p=n.useRef(null),h=n.useRef(null),m=n.useRef(new i.Group),y=n.useRef(),g=n.useRef(),E=n.useMemo((function(){return t.Children.count(e.children)}),[e.children]),w=n.useCallback((function(){if(h.current&&p.current){var e=p.current.clientWidth;h.current.style.width=e*E+"px";for(var n=0;n<h.current.children.length;n++){var t=h.current.children[n];t&&(t.style.width=e+"px",t.style.left=n*-e+"px",t.style.display="block")}}}),[p,h,E]),b=n.useCallback((function(){p.current&&(g.current=new r((function(e){e&&w()})),g.current.observe(p.current))}),[p,w]),T=n.useCallback((function(){var n=e.children,r=e.duration,i=e.infinite;e.autoplay&&t.Children.count(n)>1&&(i||d<t.Children.count(n)-1)&&(y.current=setTimeout(x,r))}),[e,d]);n.useEffect((function(){return b(),function(){m.current.removeAll(),clearTimeout(y.current),C()}}),[b,m]),n.useEffect((function(){clearTimeout(y.current),T()}),[d,e.autoplay,T]),n.useEffect((function(){w()}),[E,w]),n.useImperativeHandle(a,(function(){return{goNext:function(){x()},goBack:function(){S()},goTo:function(e,n){null!=n&&n.skipTransition?v(e):O(e)}}}));var C=function(){g.current&&p.current&&g.current.unobserve(p.current)},k=function(){e.pauseOnHover&&clearTimeout(y.current)},x=function(){var n=e.children;(e.infinite||d!==t.Children.count(n)-1)&&N((d+1)%t.Children.count(n))},S=function(){(e.infinite||0!==d)&&N(0===d?t.Children.count(e.children)-1:d-1)},M=function(e){"prev"===e.currentTarget.dataset.type?S():x()},N=function(n){if(!m.current.getAll().length){var t;null!=(t=h.current)&&t.children[n]||(n=0),clearTimeout(y.current),function e(){requestAnimationFrame(e),m.current.update()}();var r=new i.Tween({opacity:0,scale:1},m.current).to({opacity:1,scale:e.scale},e.transitionDuration).onUpdate((function(e){h.current&&(h.current.children[n].style.opacity=e.opacity,h.current.children[d].style.opacity=1-e.opacity,h.current.children[d].style.transform="scale("+e.scale+")")}));r.easing(u(e.easing)),r.onStart((function(){"function"==typeof e.onStartChange&&e.onStartChange(d,n)})),r.onComplete((function(){h.current&&(v(n),h.current.children[d].style.transform="scale(1)"),"function"==typeof e.onChange&&e.onChange(d,n)})),r.start()}},O=function(e){e!==d&&N(e)};return t.createElement("div",{dir:"ltr","aria-roledescription":"carousel"},t.createElement("div",{className:"react-slideshow-container "+(e.cssClass||""),onMouseEnter:k,onMouseOver:k,onMouseLeave:function(){e.pauseOnHover&&e.autoplay&&(y.current=setTimeout((function(){return x()}),e.duration))}},e.arrows&&s(e,d,M),t.createElement("div",{className:"react-slideshow-fadezoom-wrapper "+e.cssClass,ref:p},t.createElement("div",{className:"react-slideshow-fadezoom-images-wrap",ref:h},(t.Children.map(e.children,(function(e){return e}))||[]).map((function(e,n){return t.createElement("div",{style:{opacity:n===d?"1":"0",zIndex:n===d?"1":"0"},"data-index":n,key:n,"aria-roledescription":"slide","aria-hidden":n===d?"false":"true"},e)})))),e.arrows&&l(e,d,M)),e.indicators&&f(e,d,(function(e){var n=e.currentTarget;n.dataset.key&&parseInt(n.dataset.key)!==d&&O(parseInt(n.dataset.key))})))}));v.defaultProps=d;var p=t.forwardRef((function(e,n){return t.createElement(v,Object.assign({},e,{scale:1,ref:n}))}));p.defaultProps=d;var h=t.forwardRef((function(e,n){return t.createElement(v,Object.assign({},e,{ref:n}))}));h.defaultProps=d;var m=t.forwardRef((function(e,a){var o,d=n.useState(c(e.children,e.defaultIndex)),v=d[0],p=d[1],h=n.useState(0),m=h[0],y=h[1],g=n.useRef(null),E=n.useRef(null),w=n.useRef(new i.Group),b=n.useMemo((function(){return function(e,n){if("undefined"!=typeof window&&Array.isArray(n))return n.find((function(n){return n.breakpoint<=e}))}(m,e.responsive)}),[m,e.responsive]),T=n.useMemo((function(){return b?b.settings.slidesToScroll:e.slidesToScroll||1}),[b,e.slidesToScroll]),C=n.useMemo((function(){return b?b.settings.slidesToShow:e.slidesToShow||1}),[b,e.slidesToShow]),k=n.useMemo((function(){return t.Children.count(e.children)}),[e.children]),x=n.useMemo((function(){return m/C}),[m,C]),S=n.useRef(),M=n.useRef(),N=!1,O=0,R=n.useCallback((function(){if(E.current){E.current.style.width=m*E.current.children.length+"px";for(var e=0;e<E.current.children.length;e++){var n=E.current.children[e];n&&(n.style.width=x+"px",n.style.display="block")}}}),[m,x]),A=n.useCallback((function(){g.current&&(M.current=new r((function(e){e&&F()})),M.current.observe(g.current))}),[g]),I=n.useCallback((function(){e.autoplay&&(e.infinite||v<k-1)&&(S.current=setTimeout(z,e.duration))}),[e,k,v]);n.useEffect((function(){R()}),[m,R]),n.useEffect((function(){return A(),function(){w.current.removeAll(),clearTimeout(S.current),j()}}),[g,A,w]),n.useEffect((function(){clearTimeout(S.current),I()}),[v,m,e.autoplay,I]),n.useImperativeHandle(a,(function(){return{goNext:function(){z()},goBack:function(){q()},goTo:function(e,n){null!=n&&n.skipTransition?p(e):B(e)}}}));var j=function(){M&&g.current&&M.current.unobserve(g.current)},H=function(){e.pauseOnHover&&clearTimeout(S.current)},P=function(n){var t;if(e.canSwipe&&N&&(window.TouchEvent&&n.nativeEvent instanceof TouchEvent?t=n.nativeEvent.touches[0].pageX:n.nativeEvent instanceof MouseEvent&&(t=n.nativeEvent.clientX),t&&o)){var r=x*(v+U()),i=t-o;if(!e.infinite&&v===k-T&&i<0)return;if(!e.infinite&&0===v&&i>0)return;E.current.style.transform="translate(-"+(r-=O=i)+"px)"}},z=function(){if(e.infinite||v!==k-T){var n=D(v+T);Q(n)}},q=function(){if(e.infinite||0!==v){var n=v-T;n%T&&(n=Math.ceil(n/T)*T),Q(n)}},B=function(e){Q(D(e))},D=function(e){return e<k&&e+T>k&&(k-T)%T?k-T:e},X=function(e){"next"===e.currentTarget.dataset.type?z():q()},F=function(){g.current&&y(g.current.clientWidth)},G=function(n){e.canSwipe&&(window.TouchEvent&&n.nativeEvent instanceof TouchEvent?o=n.nativeEvent.touches[0].pageX:n.nativeEvent instanceof MouseEvent&&(o=n.nativeEvent.clientX),clearTimeout(S.current),N=!0)},L=function(){e.canSwipe&&(N=!1,Math.abs(O)/m>.2?O<0?z():q():Math.abs(O)>0&&Q(v,300))},Q=function(n,t){var r=t||e.transitionDuration,a=v,c=w.current.getAll();if(g.current){var o=g.current.clientWidth/C;if(!c.length){clearTimeout(S.current);var s={margin:-o*(a+U())+O},l=new i.Tween(s,w.current).to({margin:-o*(n+U())},r).onUpdate((function(e){E.current&&(E.current.style.transform="translate("+e.margin+"px)")}));l.easing(u(e.easing)),function e(){requestAnimationFrame(e),w.current.update()}();var f=n;f<0?f=k-T:f>=k&&(f=0),l.onStart((function(){"function"==typeof e.onStartChange&&e.onStartChange(v,f)})),l.onComplete((function(){O=0,"function"==typeof e.onChange&&e.onChange(v,f),p(f)})),l.start()}}},U=function(){return e.infinite?C:0},W={transform:"translate(-"+(v+U())*x+"px)"};return t.createElement("div",{dir:"ltr","aria-roledescription":"carousel"},t.createElement("div",{className:"react-slideshow-container",onMouseEnter:H,onMouseOver:H,onMouseLeave:function(){N?L():e.pauseOnHover&&e.autoplay&&(S.current=setTimeout(z,e.duration))},onMouseDown:G,onMouseUp:L,onMouseMove:P,onTouchStart:G,onTouchEnd:L,onTouchCancel:L,onTouchMove:P},e.arrows&&s(e,v,X),t.createElement("div",{className:"react-slideshow-wrapper slide "+(e.cssClass||""),ref:g},t.createElement("div",{className:"images-wrap",style:W,ref:E},e.infinite&&t.Children.toArray(e.children).slice(-C).map((function(e,n){return t.createElement("div",{"data-index":n-C,"aria-roledescription":"slide","aria-hidden":"true",key:n-C},e)})),(t.Children.map(e.children,(function(e){return e}))||[]).map((function(e,n){var r=function(e){return e<v+C&&e>=v}(n);return t.createElement("div",{"data-index":n,key:n,className:r?"active":"","aria-roledescription":"slide","aria-hidden":r?"false":"true"},e)})),function(){if(e.infinite||C!==T)return t.Children.toArray(e.children).slice(0,C).map((function(e,n){return t.createElement("div",{"data-index":k+n,"aria-roledescription":"slide","aria-hidden":"true",key:k+n},e)}))}())),e.arrows&&l(e,v,X)),e.indicators&&f(e,v,(function(e){var n=e.currentTarget;if(n.dataset.key){var t=parseInt(n.dataset.key);B(t*T)}}),b))}));m.defaultProps=d,exports.Fade=p,exports.Slide=m,exports.Zoom=h;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=e(require("resize-observer-polyfill")),i=require("@tweenjs/tween.js");function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var c=function(e,n){return n&&n<t.Children.count(e)?n:0},o={linear:i.Easing.Linear.None,ease:i.Easing.Quadratic.InOut,"ease-in":i.Easing.Quadratic.In,"ease-out":i.Easing.Quadratic.Out,cubic:i.Easing.Cubic.InOut,"cubic-in":i.Easing.Cubic.In,"cubic-out":i.Easing.Cubic.Out},u=function(e){return e?o[e]:o.linear},l=function(e,n,r){var i=e.prevArrow,c=n<=0&&!e.infinite,o={"data-type":"prev","aria-label":"Previous Slide",disabled:c,onClick:r};return i?t.cloneElement(i,a({className:(i.props.className||"")+" nav "+(c?"disabled":"")},o)):t.createElement("button",Object.assign({type:"button",className:"nav default-nav "+(c?"disabled":"")},o),t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},t.createElement("path",{d:"M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"})))},s=function(e,n,r){var i=e.nextArrow,c=e.infinite,o=1;"slidesToScroll"in e&&(o=e.slidesToScroll||1);var u=n>=t.Children.count(e.children)-o&&!c,l={"data-type":"next","aria-label":"Next Slide",disabled:u,onClick:r};return i?t.cloneElement(i,a({className:(i.props.className||"")+" nav "+(u?"disabled":"")},l)):t.createElement("button",Object.assign({type:"button",className:"nav default-nav "+(u?"disabled":"")},l),t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},t.createElement("path",{d:"M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"})))},f=function(e,n,r,i){var c=e.indicators,o=1;i?o=null==i?void 0:i.settings.slidesToScroll:"slidesToScroll"in e&&(o=e.slidesToScroll||1);var u=Math.ceil(t.Children.count(e.children)/o);return t.createElement("ul",{className:"indicators"},Array.from({length:u},(function(e,i){var u={"data-key":i,"aria-label":"Go to slide "+(i+1),onClick:r},l=Math.floor((n+o-1)/o)===i;return"function"==typeof c?function(e,n,r,i){return t.cloneElement(i,a({className:i.props.className+" "+(e?"active":""),key:n},r))}(l,i,u,c(i)):function(e,n,r){return t.createElement("li",{key:n},t.createElement("button",Object.assign({type:"button",className:"each-slideshow-indicator "+(e?"active":"")},r)))}(l,i,u)})))},d={duration:5e3,transitionDuration:1e3,defaultIndex:0,infinite:!0,autoplay:!0,indicators:!1,arrows:!0,pauseOnHover:!0,easing:"linear",canSwipe:!0,cssClass:"",responsive:[]},v=t.forwardRef((function(e,a){var o=n.useState(c(e.children,e.defaultIndex)),d=o[0],v=o[1],p=n.useRef(null),h=n.useRef(null),m=n.useRef(new i.Group),y=n.useRef(),g=n.useRef(),w=n.useMemo((function(){return t.Children.count(e.children)}),[e.children]),E=n.useCallback((function(){if(h.current&&p.current){var e=p.current.clientWidth;h.current.style.width=e*w+"px";for(var n=0;n<h.current.children.length;n++){var t=h.current.children[n];t&&(t.style.width=e+"px",t.style.left=n*-e+"px",t.style.display="block")}}}),[p,h,w]),b=n.useCallback((function(){p.current&&(g.current=new r((function(e){e&&E()})),g.current.observe(p.current))}),[p,E]),T=n.useCallback((function(){var n=e.children,r=e.duration,i=e.infinite;e.autoplay&&t.Children.count(n)>1&&(i||d<t.Children.count(n)-1)&&(y.current=setTimeout(k,r))}),[e,d]);n.useEffect((function(){return b(),function(){m.current.removeAll(),clearTimeout(y.current),C()}}),[b,m]),n.useEffect((function(){clearTimeout(y.current),T()}),[d,e.autoplay,T]),n.useEffect((function(){E()}),[w,E]),n.useImperativeHandle(a,(function(){return{goNext:function(){k()},goBack:function(){S()},goTo:function(e,n){null!=n&&n.skipTransition?v(e):O(e)}}}));var C=function(){g.current&&p.current&&g.current.unobserve(p.current)},x=function(){e.pauseOnHover&&clearTimeout(y.current)},k=function(){var n=e.children;(e.infinite||d!==t.Children.count(n)-1)&&N((d+1)%t.Children.count(n))},S=function(){(e.infinite||0!==d)&&N(0===d?t.Children.count(e.children)-1:d-1)},M=function(e){"prev"===e.currentTarget.dataset.type?S():k()},N=function(n){if(!m.current.getAll().length){var t;null!=(t=h.current)&&t.children[n]||(n=0),clearTimeout(y.current),function e(){requestAnimationFrame(e),m.current.update()}();var r=new i.Tween({opacity:0,scale:1},m.current).to({opacity:1,scale:e.scale},e.transitionDuration).onUpdate((function(e){h.current&&(h.current.children[n].style.opacity=e.opacity,h.current.children[d].style.opacity=1-e.opacity,h.current.children[d].style.transform="scale("+e.scale+")")}));r.easing(u(e.easing)),r.onStart((function(){"function"==typeof e.onStartChange&&e.onStartChange(d,n)})),r.onComplete((function(){h.current&&(v(n),h.current.children[d].style.transform="scale(1)"),"function"==typeof e.onChange&&e.onChange(d,n)})),r.start()}},O=function(e){e!==d&&N(e)};return t.createElement("div",{dir:"ltr","aria-roledescription":"carousel"},t.createElement("div",{className:"react-slideshow-container "+(e.cssClass||""),onMouseEnter:x,onMouseOver:x,onMouseLeave:function(){e.pauseOnHover&&e.autoplay&&(y.current=setTimeout((function(){return k()}),e.duration))}},e.arrows&&l(e,d,M),t.createElement("div",{className:"react-slideshow-fadezoom-wrapper "+e.cssClass,ref:p},t.createElement("div",{className:"react-slideshow-fadezoom-images-wrap",ref:h},(t.Children.map(e.children,(function(e){return e}))||[]).map((function(e,n){return t.createElement("div",{style:{opacity:n===d?"1":"0",zIndex:n===d?"1":"0"},"data-index":n,key:n,"aria-roledescription":"slide","aria-hidden":n===d?"false":"true"},e)})))),e.arrows&&s(e,d,M)),e.indicators&&f(e,d,(function(e){var n=e.currentTarget;n.dataset.key&&parseInt(n.dataset.key)!==d&&O(parseInt(n.dataset.key))})))}));v.defaultProps=d;var p=t.forwardRef((function(e,n){return t.createElement(v,Object.assign({},e,{scale:1,ref:n}))}));p.defaultProps=d;var h=t.forwardRef((function(e,n){return t.createElement(v,Object.assign({},e,{ref:n}))}));h.defaultProps=d;var m=t.forwardRef((function(e,a){var o,d=n.useState(c(e.children,e.defaultIndex)),v=d[0],p=d[1],h=n.useState(0),m=h[0],y=h[1],g=n.useRef(null),w=n.useRef(null),E=n.useRef(new i.Group),b=n.useMemo((function(){return function(e,n){if("undefined"!=typeof window&&Array.isArray(n))return n.find((function(n){return n.breakpoint<=e}))}(m,e.responsive)}),[m,e.responsive]),T=n.useMemo((function(){return b?b.settings.slidesToScroll:e.slidesToScroll||1}),[b,e.slidesToScroll]),C=n.useMemo((function(){return b?b.settings.slidesToShow:e.slidesToShow||1}),[b,e.slidesToShow]),x=n.useMemo((function(){return t.Children.count(e.children)}),[e.children]),k=n.useMemo((function(){return m/C}),[m,C]),S=n.useRef(),M=n.useRef(),N=!1,O=0,R=e.vertical?"translateY":"translateX",A=e.vertical?"clientY":"clientX",I=e.vertical?"pageY":"pageX",j=n.useCallback((function(){if(w.current){var n=e.vertical?"height":"width";w.current.style[n]=m*w.current.children.length+"px",e.vertical&&g.current&&(g.current.style[n]=m+"px");for(var t=0;t<w.current.children.length;t++){var r=w.current.children[t];r&&(e.vertical||(r.style[n]=k+"px"),r.style.display="block")}}}),[m,k]),H=n.useCallback((function(){g.current&&(M.current=new r((function(e){e&&U()})),M.current.observe(g.current))}),[g]),z=n.useCallback((function(){e.autoplay&&(e.infinite||v<x-1)&&(S.current=setTimeout(D,e.duration))}),[e,x,v]);n.useEffect((function(){j()}),[m,j]),n.useEffect((function(){return H(),function(){E.current.removeAll(),clearTimeout(S.current),P()}}),[g,H,E]),n.useEffect((function(){clearTimeout(S.current),z()}),[v,m,e.autoplay,z]),n.useImperativeHandle(a,(function(){return{goNext:function(){D()},goBack:function(){F()},goTo:function(e,n){null!=n&&n.skipTransition?p(e):G(e)}}}));var P=function(){M&&g.current&&M.current.unobserve(g.current)},q=function(){e.pauseOnHover&&clearTimeout(S.current)},B=function(n){var t;if(e.canSwipe&&N&&(t=window.TouchEvent&&n.nativeEvent instanceof TouchEvent?n.nativeEvent.touches[0][I]:n.nativeEvent[A])&&o){var r=k*(v+_()),i=t-o;if(!e.infinite&&v===x-T&&i<0)return;if(!e.infinite&&0===v&&i>0)return;w.current.style.transform=R+"(-"+(r-=O=i)+"px)"}},D=function(){if(e.infinite||v!==x-T){var n=L(v+T);Y(n)}},F=function(){if(e.infinite||0!==v){var n=v-T;n%T&&(n=Math.ceil(n/T)*T),Y(n)}},G=function(e){Y(L(e))},L=function(e){return e<x&&e+T>x&&(x-T)%T?x-T:e},Q=function(e){"next"===e.currentTarget.dataset.type?D():F()},U=function(){var n=e.vertical?"clientHeight":"clientWidth";e.vertical?w.current&&y(w.current.children[0][n]):g.current&&y(g.current[n])},W=function(n){e.canSwipe&&(o=window.TouchEvent&&n.nativeEvent instanceof TouchEvent?n.nativeEvent.touches[0][I]:n.nativeEvent[A],clearTimeout(S.current),N=!0)},X=function(){e.canSwipe&&(N=!1,Math.abs(O)/m>.2?O<0?D():F():Math.abs(O)>0&&Y(v,300))},Y=function(n,t){var r=t||e.transitionDuration,a=v,c=E.current.getAll();if(g.current){var o=g.current[e.vertical?"clientHeight":"clientWidth"]/C;if(!c.length){clearTimeout(S.current);var l={margin:-o*(a+_())+O},s=new i.Tween(l,E.current).to({margin:-o*(n+_())},r).onUpdate((function(e){w.current&&(w.current.style.transform=R+"("+e.margin+"px)")}));s.easing(u(e.easing)),function e(){requestAnimationFrame(e),E.current.update()}();var f=n;f<0?f=x-T:f>=x&&(f=0),s.onStart((function(){"function"==typeof e.onStartChange&&e.onStartChange(v,f)})),s.onComplete((function(){O=0,"function"==typeof e.onChange&&e.onChange(v,f),p(f)})),s.start()}}},_=function(){return e.infinite?C:0},Z={transform:R+"(-"+(v+_())*k+"px)"};return t.createElement("div",{dir:"ltr","aria-roledescription":"carousel"},t.createElement("div",{className:"react-slideshow-container",onMouseEnter:q,onMouseOver:q,onMouseLeave:function(){N?X():e.pauseOnHover&&e.autoplay&&(S.current=setTimeout(D,e.duration))},onMouseDown:W,onMouseUp:X,onMouseMove:B,onTouchStart:W,onTouchEnd:X,onTouchCancel:X,onTouchMove:B},e.arrows&&l(e,v,Q),t.createElement("div",{className:"react-slideshow-wrapper slide "+(e.cssClass||""),ref:g},t.createElement("div",{className:"images-wrap "+(e.vertical?"vertical":"horizontal"),style:Z,ref:w},e.infinite&&t.Children.toArray(e.children).slice(-C).map((function(e,n){return t.createElement("div",{"data-index":n-C,"aria-roledescription":"slide","aria-hidden":"true",key:n-C},e)})),(t.Children.map(e.children,(function(e){return e}))||[]).map((function(e,n){var r=function(e){return e<v+C&&e>=v}(n);return t.createElement("div",{"data-index":n,key:n,className:r?"active":"","aria-roledescription":"slide","aria-hidden":r?"false":"true"},e)})),function(){if(e.infinite||C!==T)return t.Children.toArray(e.children).slice(0,C).map((function(e,n){return t.createElement("div",{"data-index":x+n,"aria-roledescription":"slide","aria-hidden":"true",key:x+n},e)}))}())),e.arrows&&s(e,v,Q)),!!e.indicators&&f(e,v,(function(e){var n=e.currentTarget;if(n.dataset.key){var t=parseInt(n.dataset.key);G(t*T)}}),b))}));m.defaultProps=d,exports.Fade=p,exports.Slide=m,exports.Zoom=h;
 //# sourceMappingURL=react-slideshow-image.cjs.production.min.js.map

dist/react-slideshow-image.esm.js

@@ -9,3 +9,2 @@ import React, { useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
       var source = arguments[i];
-
       for (var key in source) {
@@ -17,3 +16,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -28,3 +26,2 @@ };
   }
-
   return 0;
@@ -38,3 +35,2 @@ };
   }
-
   return;
@@ -55,3 +51,2 @@ };
   }
-
   return EASING_METHODS.linear;
@@ -61,3 +56,3 @@ };
   var prevArrow = _ref.prevArrow,
-      infinite = _ref.infinite;
+    infinite = _ref.infinite;
   var isDisabled = currentIndex <= 0 && !infinite;
@@ -70,3 +65,2 @@ var props = {
   };
-
   if (prevArrow) {
@@ -77,3 +71,2 @@ return /*#__PURE__*/React.cloneElement(prevArrow, _extends({
   }
-
   var className = "nav default-nav " + (isDisabled ? 'disabled' : '');
@@ -93,10 +86,8 @@ return /*#__PURE__*/React.createElement("button", Object.assign({
   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;
@@ -109,3 +100,2 @@ var props = {
   };
-
   if (nextArrow) {
@@ -116,3 +106,2 @@ return /*#__PURE__*/React.cloneElement(nextArrow, _extends({
   }
-
   var className = "nav default-nav " + (isDisabled ? 'disabled' : '');
@@ -130,3 +119,2 @@ return /*#__PURE__*/React.createElement("button", Object.assign({
 };
-
 var showDefaultIndicator = function showDefaultIndicator(isCurrentPageActive, key, indicatorProps) {
@@ -140,3 +128,2 @@ return /*#__PURE__*/React.createElement("li", {
 };
-
 var showCustomIndicator = function showCustomIndicator(isCurrentPageActive, key, indicatorProps, eachIndicator) {
@@ -148,8 +135,6 @@ return /*#__PURE__*/React.cloneElement(eachIndicator, _extends({
 };
-
 var showIndicators = function showIndicators(props, currentIndex, navigate, responsiveSettings) {
   var children = props.children,
-      indicators = props.indicators;
+    indicators = props.indicators;
   var slidesToScroll = 1;
-
   if (responsiveSettings) {
@@ -160,3 +145,2 @@ slidesToScroll = responsiveSettings == null ? void 0 : responsiveSettings.settings.slidesToScroll;
   }
-
   var pages = Math.ceil(React.Children.count(children) / slidesToScroll);
@@ -174,7 +158,5 @@ return /*#__PURE__*/React.createElement("ul", {
     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);
@@ -201,5 +183,4 @@ }));
   var _useState = useState(getStartingIndex(props.children, props.defaultIndex)),
-      index = _useState[0],
-      setIndex = _useState[1];
-
+    index = _useState[0],
+    setIndex = _useState[1];
   var wrapperRef = useRef(null);
@@ -218,6 +199,4 @@ var innerWrapperRef = useRef(null);
       innerWrapperRef.current.style.width = fullwidth + "px";
-
       for (var _index = 0; _index < innerWrapperRef.current.children.length; _index++) {
         var eachDiv = innerWrapperRef.current.children[_index];
-
         if (eachDiv) {
@@ -242,10 +221,9 @@ eachDiv.style.width = wrapperWidth + "px";
     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]);
@@ -284,3 +262,2 @@ useEffect(function () {
   });
-
   var removeResizeObserver = function removeResizeObserver() {
@@ -291,3 +268,2 @@ if (resizeObserver.current && wrapperRef.current) {
   };
-
   var pauseSlides = function pauseSlides() {
@@ -298,8 +274,6 @@ if (props.pauseOnHover) {
   };
-
   var startSlides = function startSlides() {
     var pauseOnHover = props.pauseOnHover,
-        autoplay = props.autoplay,
-        duration = props.duration;
-
+      autoplay = props.autoplay,
+      duration = props.duration;
     if (pauseOnHover && autoplay) {
@@ -311,28 +285,20 @@ timeout.current = setTimeout(function () {
   };
-
   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') {
@@ -344,3 +310,2 @@ moveBack();
   };
-
   var animate = function animate() {
@@ -350,13 +315,9 @@ requestAnimationFrame(animate);
   };
-
   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);
@@ -375,3 +336,2 @@ var value = {
         }
-
         innerWrapperRef.current.children[newIndex].style.opacity = value.opacity;
@@ -392,3 +352,2 @@ innerWrapperRef.current.children[index].style.opacity = 1 - value.opacity;
         }
-
         if (typeof props.onChange === 'function') {
@@ -401,3 +360,2 @@ props.onChange(index, newIndex);
   };
-
   var moveTo = function moveTo(gotoIndex) {
@@ -408,10 +366,7 @@ if (gotoIndex !== index) {
   };
-
   var navigate = function navigate(event) {
     var currentTarget = event.currentTarget;
-
     if (!currentTarget.dataset.key) {
       return;
     }
-
     if (parseInt(currentTarget.dataset.key) !== index) {
@@ -421,3 +376,2 @@ moveTo(parseInt(currentTarget.dataset.key));
   };
-
   return /*#__PURE__*/React.createElement("div", {
@@ -471,9 +425,7 @@ dir: "ltr",
   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);
@@ -483,4 +435,4 @@ var innerWrapperRef = useRef(null);
   var responsiveSettings = useMemo(function () {
-    return getResponsiveSettings(wrapperWidth, props.responsive);
-  }, [wrapperWidth, props.responsive]);
+    return getResponsiveSettings(wrapperSize, props.responsive);
+  }, [wrapperSize, props.responsive]);
   var slidesToScroll = useMemo(function () {
@@ -490,3 +442,2 @@ if (responsiveSettings) {
     }
-
     return props.slidesToScroll || 1;
@@ -498,3 +449,2 @@ }, [responsiveSettings, props.slidesToScroll]);
     }
-
     return props.slidesToShow || 1;
@@ -505,20 +455,27 @@ }, [responsiveSettings, props.slidesToShow]);
   }, [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";
@@ -528,3 +485,3 @@ }
     }
-  }, [wrapperWidth, eachChildWidth]);
+  }, [wrapperSize, eachChildSize]);
   var initResizeObserver = useCallback(function () {
@@ -534,3 +491,3 @@ if (wrapperRef.current) {
         if (!entries) return;
-        setWidth();
+        setSize();
       });
@@ -542,13 +499,12 @@ resizeObserver.current.observe(wrapperRef.current);
     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 () {
@@ -565,3 +521,3 @@ initResizeObserver();
     play();
-  }, [index, wrapperWidth, props.autoplay, play]);
+  }, [index, wrapperSize, props.autoplay, play]);
   useImperativeHandle(ref, function () {
@@ -584,3 +540,2 @@ return {
   });
-
   var removeResizeObserver = function removeResizeObserver() {
@@ -591,3 +546,2 @@ if (resizeObserver && wrapperRef.current) {
   };
-
   var pauseSlides = function pauseSlides() {
@@ -598,17 +552,13 @@ if (props.pauseOnHover) {
   };
-
   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) {
@@ -619,3 +569,2 @@ // if it is the last and infinite is false and you're swiping left
         }
-
         if (!props.infinite && index === 0 && distance > 0) {
@@ -626,10 +575,8 @@ // if it is the first and infinite is false and you're swiping right
         }
-
         distanceSwiped = distance;
         translateValue -= distanceSwiped;
-        innerWrapperRef.current.style.transform = "translate(-" + translateValue + "px)";
+        innerWrapperRef.current.style.transform = translateType + "(-" + translateValue + "px)";
       }
     }
   };
-
   var moveNext = function moveNext() {
@@ -639,7 +586,5 @@ if (!props.infinite && index === childrenCount - slidesToScroll) {
     }
-
     var nextIndex = calculateIndex(index + slidesToScroll);
     transitionSlide(nextIndex);
   };
-
   var moveBack = function moveBack() {
@@ -649,27 +594,19 @@ if (!props.infinite && index === 0) {
     }
-
     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) {
@@ -680,9 +617,6 @@ if (nextIndex < childrenCount && nextIndex + slidesToScroll > childrenCount) {
       }
-
       return nextIndex;
     }
-
     return nextIndex;
   };
-
   var startSlides = function startSlides() {
@@ -695,6 +629,4 @@ if (dragging) {
   };
-
   var moveSlides = function moveSlides(_ref2) {
     var dataset = _ref2.currentTarget.dataset;
-
     if (dataset.type === 'next') {
@@ -706,3 +638,2 @@ moveNext();
   };
-
   var renderPreceedingSlides = function renderPreceedingSlides() {
@@ -718,3 +649,2 @@ return React.Children.toArray(props.children).slice(-slidesToShow).map(function (each, index) {
   };
-
   var renderTrailingSlides = function renderTrailingSlides() {
@@ -724,3 +654,2 @@ if (!props.infinite && slidesToShow === slidesToScroll) {
     }
-
     return React.Children.toArray(props.children).slice(0, slidesToShow).map(function (each, index) {
@@ -735,17 +664,21 @@ return /*#__PURE__*/React.createElement("div", {
   };
-
-  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);
@@ -755,8 +688,6 @@ 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) {
@@ -774,3 +705,2 @@ moveNext();
   };
-
   var animate = function animate() {
@@ -780,3 +710,2 @@ requestAnimationFrame(animate);
   };
-
   var transitionSlide = function transitionSlide(toIndex, animationDuration) {
@@ -786,19 +715,17 @@ var transitionDuration = animationDuration || props.transitionDuration;
     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(value, tweenGroup.current).to({
-        margin: -childWidth * (toIndex + getOffset())
+        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)";
         }
@@ -809,3 +736,2 @@ });
       var newIndex = toIndex;
-
       if (newIndex < 0) {
@@ -816,3 +742,2 @@ newIndex = childrenCount - slidesToScroll;
       }
-
       tween.onStart(function () {
@@ -825,7 +750,5 @@ if (typeof props.onStartChange === 'function') {
         distanceSwiped = 0;
-
         if (typeof props.onChange === 'function') {
           props.onChange(index, newIndex);
         }
-
         setIndex(newIndex);
@@ -836,7 +759,5 @@ });
   };
-
   var isSlideActive = function isSlideActive(key) {
     return key < index + slidesToShow && key >= index;
   };
-
   var getOffset = function getOffset() {
@@ -846,8 +767,6 @@ if (!props.infinite) {
     }
-
     return slidesToShow;
   };
-
   var style = {
-    transform: "translate(-" + (index + getOffset()) * eachChildWidth + "px)"
+    transform: translateType + "(-" + (index + getOffset()) * eachChildSize + "px)"
   };
@@ -873,3 +792,3 @@ return /*#__PURE__*/React.createElement("div", {
   }, /*#__PURE__*/React.createElement("div", {
-    className: "images-wrap",
+    className: "images-wrap " + (props.vertical ? 'vertical' : 'horizontal'),
     style: style,
@@ -888,3 +807,3 @@ ref: innerWrapperRef
     }, 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));
 });
@@ -891,0 +810,0 @@ Slide.defaultProps = defaultProps;

dist/slide.d.ts

 import React from 'react';
 import { SlideshowRef, SlideProps } from './types';
-export declare const Slide: React.ForwardRefExoticComponent<Pick<SlideProps, "responsive" | "slidesToShow" | "slidesToScroll" | "children" | "duration" | "transitionDuration" | "defaultIndex" | "indicators" | "prevArrow" | "nextArrow" | "arrows" | "autoplay" | "infinite" | "pauseOnHover" | "canSwipe" | "easing" | "cssClass" | "onStartChange" | "onChange"> & React.RefAttributes<SlideshowRef>>;
+export declare const Slide: React.ForwardRefExoticComponent<Pick<SlideProps, "responsive" | "slidesToShow" | "slidesToScroll" | "vertical" | "children" | "duration" | "transitionDuration" | "defaultIndex" | "indicators" | "prevArrow" | "nextArrow" | "arrows" | "autoplay" | "infinite" | "pauseOnHover" | "canSwipe" | "easing" | "cssClass" | "onStartChange" | "onChange"> & React.RefAttributes<SlideshowRef>>;

dist/types.d.ts

@@ -58,2 +58,4 @@ import React, { ReactElement, ReactNode } from 'react';
     slidesToScroll?: number;
+    /** If slide should scroll vertically */
+    vertical?: boolean;
 }
@@ -60,0 +62,0 @@ export declare type ButtonClick = (event: React.SyntheticEvent<HTMLButtonElement>) => void;

package.json

 {
   "name": "react-slideshow-image",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "An image slideshow with react",
@@ -34,3 +34,5 @@ "license": "MIT",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "cypress": "cypress open",
+    "e2e": "cypress run"
   },
@@ -80,2 +82,4 @@ "peerDependencies": {
     "babel-loader": "^8.2.5",
+    "cypress": "^13.3.0",
+    "cypress-iframe": "^1.0.1",
     "husky": "^8.0.1",
@@ -82,0 +86,0 @@ "react": "^17.0.0",

No alert changes

Improved metrics

Total package byte prevSize

240415

increased by3.19%

Lines of code

1667

increased by2.58%

Worsened metrics

Dev dependency count

23

increased by9.52%

No dependency changes