nuka-carousel - npm Package Compare versions

Comparing version 4.5.12 to 4.5.13

es/default-controls.js

@@ -27,3 +27,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
     padding: 10,
-    opacity: disabled ? 0.3 : 1,
+    textTransform: 'uppercase',
+    opacity: disabled && 0.3,
     cursor: disabled ? 'not-allowed' : 'pointer'
@@ -64,3 +65,3 @@ };
         type: "button"
-      }, "PREV");
+      }, "Prev");
     }
@@ -150,3 +151,3 @@ }]);
         type: "button"
-      }, "NEXT");
+      }, "Next");
     }
@@ -197,16 +198,10 @@ }]);
         position: 'relative',
+        top: -10,
+        display: 'flex',
         margin: 0,
-        top: -10,
-        padding: 0
+        padding: 0,
+        listStyleType: 'none'
       };
     }
   }, {
-    key: "getListItemStyles",
-    value: function getListItemStyles() {
-      return {
-        listStyleType: 'none',
-        display: 'inline-block'
-      };
-    }
-  }, {
     key: "getButtonStyles",
@@ -231,3 +226,2 @@ value: function getButtonStyles(active) {
         return React.createElement("li", {
-          style: _this3.getListItemStyles(),
           key: index,
@@ -240,12 +234,14 @@ className: _this3.props.currentSlide === index ? 'paging-item active' : 'paging-item'
           "aria-label": "slide ".concat(index + 1, " bullet")
-        }, React.createElement("span", {
+        }, React.createElement("svg", {
           className: "paging-dot",
+          width: "6",
+          height: "6"
+        }, React.createElement("circle", {
+          cx: "3",
+          cy: "3",
+          r: "3",
           style: {
-            display: 'inline-block',
-            borderRadius: '50%',
-            width: '6px',
-            height: '6px',
-            background: 'black'
+            fill: 'black'
           }
-        })));
+        }))));
       }));
@@ -252,0 +248,0 @@ }

es/index.js

@@ -140,8 +140,11 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
       }
+
+      this.getlockScrollEvents().lockTouchScroll();
     } // @TODO Remove deprecated componentWillReceiveProps with getDerivedStateFromProps
     // eslint-disable-next-line react/no-deprecated
+    // eslint-disable-next-line camelcase
 
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var slideCount = getValidChildren(nextProps.children).length;
@@ -220,2 +223,4 @@ var slideCountChanged = slideCount !== this.state.slideCount;
       }
+
+      this.getlockScrollEvents().unlockTouchScroll();
     }
@@ -264,5 +269,37 @@ }, {
   }, {
+    key: "getlockScrollEvents",
+    value: function getlockScrollEvents() {
+      var _this3 = this;
+
+      var blockEvent = function blockEvent(e) {
+        if (_this3.state.dragging) {
+          var direction = swipeDirection(_this3.touchObject.startX, e.touches[0].pageX, _this3.touchObject.startY, e.touches[0].pageY, _this3.props.vertical);
+
+          if (direction !== 0) {
+            e.preventDefault();
+          }
+        }
+      };
+
+      var lockTouchScroll = function lockTouchScroll() {
+        document.addEventListener('touchmove', blockEvent, {
+          passive: false
+        });
+      };
+
+      var unlockTouchScroll = function unlockTouchScroll() {
+        document.addEventListener('touchmove', blockEvent, {
+          passive: false
+        });
+      };
+
+      return {
+        lockTouchScroll: lockTouchScroll,
+        unlockTouchScroll: unlockTouchScroll
+      };
+    }
+  }, {
     key: "getTouchEvents",
     value: function getTouchEvents() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -278,3 +315,3 @@ if (this.props.swiping === false) {
         onTouchStart: function onTouchStart(e) {
-          _this3.touchObject = {
+          _this4.touchObject = {
             startX: e.touches[0].pageX,
@@ -284,5 +321,5 @@ startY: e.touches[0].pageY
 
-          _this3.handleMouseOver();
+          _this4.handleMouseOver();
 
-          _this3.setState({
+          _this4.setState({
             dragging: true
@@ -292,3 +329,3 @@ });
         onTouchMove: function onTouchMove(e) {
-          var direction = swipeDirection(_this3.touchObject.startX, e.touches[0].pageX, _this3.touchObject.startY, e.touches[0].pageY, _this3.props.vertical);
+          var direction = swipeDirection(_this4.touchObject.startX, e.touches[0].pageX, _this4.touchObject.startY, e.touches[0].pageY, _this4.props.vertical);
 
@@ -299,12 +336,12 @@ if (direction !== 0) {
 
-          var length = _this3.props.vertical ? Math.round(Math.sqrt(Math.pow(e.touches[0].pageY - _this3.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.touches[0].pageX - _this3.touchObject.startX, 2)));
+          var length = _this4.props.vertical ? Math.round(Math.sqrt(Math.pow(e.touches[0].pageY - _this4.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.touches[0].pageX - _this4.touchObject.startX, 2)));
 
           if (length >= 10) {
-            if (_this3.clickDisabled === false) _this3.props.onDragStart(e);
-            _this3.clickDisabled = true;
+            if (_this4.clickDisabled === false) _this4.props.onDragStart(e);
+            _this4.clickDisabled = true;
           }
 
-          _this3.touchObject = {
-            startX: _this3.touchObject.startX,
-            startY: _this3.touchObject.startY,
+          _this4.touchObject = {
+            startX: _this4.touchObject.startX,
+            startY: _this4.touchObject.startY,
             endX: e.touches[0].pageX,
@@ -316,14 +353,14 @@ endY: e.touches[0].pageY,
 
-          _this3.setState({
-            left: _this3.props.vertical ? 0 : _this3.getTargetLeft(_this3.touchObject.length * _this3.touchObject.direction),
-            top: _this3.props.vertical ? _this3.getTargetLeft(_this3.touchObject.length * _this3.touchObject.direction) : 0
+          _this4.setState({
+            left: _this4.props.vertical ? 0 : _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction),
+            top: _this4.props.vertical ? _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction) : 0
           });
         },
         onTouchEnd: function onTouchEnd(e) {
-          _this3.handleSwipe(e);
+          _this4.handleSwipe(e);
 
-          _this3.handleMouseOut();
+          _this4.handleMouseOut();
         },
         onTouchCancel: function onTouchCancel(e) {
-          _this3.handleSwipe(e);
+          _this4.handleSwipe(e);
         }
@@ -335,3 +372,3 @@ };
     value: function getMouseEvents() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -349,3 +386,7 @@ if (this.props.dragging === false) {
         onMouseDown: function onMouseDown(e) {
-          _this4.touchObject = {
+          if (e.preventDefault) {
+            e.preventDefault();
+          }
+
+          _this5.touchObject = {
             startX: e.clientX,
@@ -355,3 +396,3 @@ startY: e.clientY
 
-          _this4.setState({
+          _this5.setState({
             dragging: true
@@ -361,7 +402,7 @@ });
         onMouseMove: function onMouseMove(e) {
-          if (!_this4.state.dragging) {
+          if (!_this5.state.dragging) {
             return;
           }
 
-          var direction = swipeDirection(_this4.touchObject.startX, e.clientX, _this4.touchObject.startY, e.clientY, _this4.props.vertical);
+          var direction = swipeDirection(_this5.touchObject.startX, e.clientX, _this5.touchObject.startY, e.clientY, _this5.props.vertical);
 
@@ -372,12 +413,12 @@ if (direction !== 0) {
 
-          var length = _this4.props.vertical ? Math.round(Math.sqrt(Math.pow(e.clientY - _this4.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.clientX - _this4.touchObject.startX, 2))); // prevents disabling click just because mouse moves a fraction of a pixel
+          var length = _this5.props.vertical ? Math.round(Math.sqrt(Math.pow(e.clientY - _this5.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.clientX - _this5.touchObject.startX, 2))); // prevents disabling click just because mouse moves a fraction of a pixel
 
           if (length >= 10) {
-            if (_this4.clickDisabled === false) _this4.props.onDragStart(e);
-            _this4.clickDisabled = true;
+            if (_this5.clickDisabled === false) _this5.props.onDragStart(e);
+            _this5.clickDisabled = true;
           }
 
-          _this4.touchObject = {
-            startX: _this4.touchObject.startX,
-            startY: _this4.touchObject.startY,
+          _this5.touchObject = {
+            startX: _this5.touchObject.startX,
+            startY: _this5.touchObject.startY,
             endX: e.clientX,
@@ -389,10 +430,10 @@ endY: e.clientY,
 
-          _this4.setState({
-            left: _this4.props.vertical ? 0 : _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction),
-            top: _this4.props.vertical ? _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction) : 0
+          _this5.setState({
+            left: _this5.props.vertical ? 0 : _this5.getTargetLeft(_this5.touchObject.length * _this5.touchObject.direction),
+            top: _this5.props.vertical ? _this5.getTargetLeft(_this5.touchObject.length * _this5.touchObject.direction) : 0
           });
         },
         onMouseUp: function onMouseUp(e) {
-          if (_this4.touchObject.length === 0 || _this4.touchObject.length === undefined) {
-            _this4.setState({
+          if (_this5.touchObject.length === 0 || _this5.touchObject.length === undefined) {
+            _this5.setState({
               dragging: false
@@ -404,10 +445,10 @@ });
 
-          _this4.handleSwipe(e);
+          _this5.handleSwipe(e);
         },
         onMouseLeave: function onMouseLeave(e) {
-          if (!_this4.state.dragging) {
+          if (!_this5.state.dragging) {
             return;
           }
 
-          _this4.handleSwipe(e);
+          _this5.handleSwipe(e);
         }
@@ -465,3 +506,3 @@ };
     value: function handleSwipe() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -498,3 +539,3 @@ var slidesToShow = this.state.slidesToShow;
       this.timers.push(setTimeout(function () {
-        _this5.clickDisabled = false;
+        _this6.clickDisabled = false;
       }, 0));
@@ -683,3 +724,3 @@ this.touchObject = {};
     value: function goToSlide(index, props) {
-      var _this6 = this;
+      var _this7 = this;
 
@@ -711,16 +752,16 @@ if (props === undefined) {
             return {
-              left: props.vertical ? 0 : _this6.getTargetLeft(_this6.state.slideWidth, prevState.currentSlide),
-              top: props.vertical ? _this6.getTargetLeft(_this6.state.slideWidth, prevState.currentSlide) : 0,
+              left: props.vertical ? 0 : _this7.getTargetLeft(_this7.state.slideWidth, prevState.currentSlide),
+              top: props.vertical ? _this7.getTargetLeft(_this7.state.slideWidth, prevState.currentSlide) : 0,
               currentSlide: 0,
               isWrappingAround: true,
-              wrapToIndex: _this6.state.slideCount
+              wrapToIndex: _this7.state.slideCount
             };
           }, function () {
-            _this6.timers.push(setTimeout(function () {
-              _this6.resetAutoplay();
+            _this7.timers.push(setTimeout(function () {
+              _this7.resetAutoplay();
 
-              _this6.isTransitioning = false;
+              _this7.isTransitioning = false;
 
               if (index !== previousSlide) {
-                _this6.props.afterSlide(0);
+                _this7.props.afterSlide(0);
               }
@@ -735,4 +776,4 @@ }, props.speed));
             return {
-              left: props.vertical ? 0 : _this6.getTargetLeft(0, prevState.currentSlide),
-              top: props.vertical ? _this6.getTargetLeft(0, prevState.currentSlide) : 0,
+              left: props.vertical ? 0 : _this7.getTargetLeft(0, prevState.currentSlide),
+              top: props.vertical ? _this7.getTargetLeft(0, prevState.currentSlide) : 0,
               currentSlide: endSlide,
@@ -743,9 +784,9 @@ isWrappingAround: true,
           }, function () {
-            _this6.timers.push(setTimeout(function () {
-              _this6.resetAutoplay();
+            _this7.timers.push(setTimeout(function () {
+              _this7.resetAutoplay();
 
-              _this6.isTransitioning = false;
+              _this7.isTransitioning = false;
 
               if (index !== previousSlide) {
-                _this6.props.afterSlide(_this6.state.slideCount - 1);
+                _this7.props.afterSlide(_this7.state.slideCount - 1);
               }
@@ -762,9 +803,9 @@ }, props.speed));
       }, function () {
-        return _this6.timers.push(setTimeout(function () {
-          _this6.resetAutoplay();
+        return _this7.timers.push(setTimeout(function () {
+          _this7.resetAutoplay();
 
-          _this6.isTransitioning = false;
+          _this7.isTransitioning = false;
 
           if (index !== previousSlide) {
-            _this6.props.afterSlide(index);
+            _this7.props.afterSlide(index);
           }
@@ -900,3 +941,3 @@ }, props.speed));
     value: function setDimensions(props) {
-      var _this7 = this;
+      var _this8 = this;
 
@@ -938,3 +979,3 @@ var stateCb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
 
-        _this7.setLeft();
+        _this8.setLeft();
       });
@@ -970,3 +1011,3 @@ }
     value: function renderControls() {
-      var _this8 = this;
+      var _this9 = this;
 
@@ -981,22 +1022,22 @@ if (this.props.withoutControls) {
               key = _ref.key;
-          var func = _this8.props[funcName];
+          var func = _this9.props[funcName];
           var controlChildren = func && typeof func === 'function' && func({
-            cellAlign: _this8.props.cellAlign,
-            cellSpacing: _this8.props.cellSpacing,
-            currentSlide: _this8.state.currentSlide,
-            frameWidth: _this8.state.frameWidth,
+            cellAlign: _this9.props.cellAlign,
+            cellSpacing: _this9.props.cellSpacing,
+            currentSlide: _this9.state.currentSlide,
+            frameWidth: _this9.state.frameWidth,
             goToSlide: function goToSlide(index) {
-              return _this8.goToSlide(index);
+              return _this9.goToSlide(index);
             },
             nextSlide: function nextSlide() {
-              return _this8.nextSlide();
+              return _this9.nextSlide();
             },
             previousSlide: function previousSlide() {
-              return _this8.previousSlide();
+              return _this9.previousSlide();
             },
-            slideCount: _this8.state.slideCount,
-            slidesToScroll: _this8.state.slidesToScroll,
-            slidesToShow: _this8.state.slidesToShow,
-            slideWidth: _this8.state.slideWidth,
-            wrapAround: _this8.props.wrapAround
+            slideCount: _this9.state.slideCount,
+            slidesToScroll: _this9.state.slidesToScroll,
+            slidesToShow: _this9.state.slidesToShow,
+            slideWidth: _this9.state.slideWidth,
+            wrapAround: _this9.props.wrapAround
           });
@@ -1014,3 +1055,3 @@ return controlChildren && React.createElement("div", {
     value: function render() {
-      var _this9 = this;
+      var _this10 = this;
 
@@ -1035,3 +1076,3 @@ var _this$state2 = this.state,
       return React.createElement("div", {
-        className: ['slider', this.props.className || ''].join(' '),
+        className: ['slider', this.props.className || ''].join(' ').trim(),
         style: _extends({}, getSliderStyles(this.props.width, this.props.height), this.props.style)
@@ -1046,3 +1087,3 @@ }, !this.props.autoplay && React.createElement(AnnounceSlide, {
         ref: function ref(frame) {
-          return _this9.frame = frame;
+          return _this10.frame = frame;
         },
@@ -1059,7 +1100,7 @@ style: frameStyles
         update: function update() {
-          var _this9$getOffsetDelta = _this9.getOffsetDeltas(),
-              tx = _this9$getOffsetDelta.tx,
-              ty = _this9$getOffsetDelta.ty;
+          var _this10$getOffsetDelt = _this10.getOffsetDeltas(),
+              tx = _this10$getOffsetDelt.tx,
+              ty = _this10$getOffsetDelt.ty;
 
-          if (_this9.props.disableEdgeSwiping && !_this9.props.wrapAround && _this9.isEdgeSwiping()) {
+          if (_this10.props.disableEdgeSwiping && !_this10.props.wrapAround && _this10.isEdgeSwiping()) {
             return {};
@@ -1072,11 +1113,11 @@ } else {
                 duration: duration,
-                ease: _this9.state.easing
+                ease: _this10.state.easing
               },
               events: {
                 end: function end() {
-                  var newLeft = _this9.props.vertical ? 0 : _this9.getTargetLeft();
-                  var newTop = _this9.props.vertical ? _this9.getTargetLeft() : 0;
+                  var newLeft = _this10.props.vertical ? 0 : _this10.getTargetLeft();
+                  var newTop = _this10.props.vertical ? _this10.getTargetLeft() : 0;
 
-                  if (newLeft !== _this9.state.left || newTop !== _this9.state.top) {
-                    _this9.setState({
+                  if (newLeft !== _this10.state.left || newTop !== _this10.state.top) {
+                    _this10.setState({
                       left: newLeft,
@@ -1087,3 +1128,3 @@ top: newTop,
                     }, function () {
-                      _this9.setState({
+                      _this10.setState({
                         resetWrapAroundPosition: false
@@ -1101,3 +1142,3 @@ });
               ty = _ref2.ty;
-          return React.createElement(TransitionControl, _extends({}, getTransitionProps(_this9.props, _this9.state), {
+          return React.createElement(TransitionControl, _extends({}, getTransitionProps(_this10.props, _this10.state), {
             deltaX: tx,
@@ -1104,0 +1145,0 @@ deltaY: ty

es/transitions/scroll-transition.js

@@ -59,3 +59,15 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
       var targetPosition = (this.props.slideWidth + this.props.cellSpacing) * index;
-      var startSlide = Math.min(Math.abs(Math.floor(positionValue / this.props.slideWidth)), this.props.slideCount - 1);
+      var cellAlignOffset = 0;
+
+      switch (this.props.cellAlign) {
+        case 'center':
+          cellAlignOffset = (this.props.slideWidth + this.props.cellSpacing) * ((this.props.slidesToShow - 1) / 2);
+          break;
+
+        case 'right':
+          cellAlignOffset = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slidesToShow - 1);
+          break;
+      }
+
+      var startSlide = Math.min(Math.floor(Math.abs((positionValue - cellAlignOffset) / this.props.slideWidth)), this.props.slideCount - 1);
       var offset = 0;
@@ -71,9 +83,47 @@
         var direction = this.getSlideDirection(startSlide, this.props.currentSlide, this.props.isWrappingAround);
-        var slidesBefore = Math.floor((this.props.slideCount - 1) / 2);
-        var slidesAfter = this.props.slideCount - slidesBefore - 1;
+        var slidesBefore = 0;
+        var slidesAfter = 0;
 
-        if (direction < 0) {
-          var temp = slidesBefore;
-          slidesBefore = slidesAfter;
-          slidesAfter = temp;
+        switch (this.props.cellAlign) {
+          case 'left':
+            if (direction < 0) {
+              slidesBefore = this.props.slidesToScroll;
+              slidesAfter = this.props.slideCount - this.props.slidesToScroll - 1;
+            } else {
+              slidesBefore = 0;
+              slidesAfter = this.props.slideCount - 1;
+            }
+
+            break;
+
+          case 'center':
+            if (direction === 0) {
+              slidesBefore = Math.floor((this.props.slideCount - 1) / 2);
+              slidesAfter = this.props.slideCount - slidesBefore - 1;
+            } else {
+              var visibleSlidesFromCenter = Math.ceil((this.props.slidesToShow - 1) / 2);
+              var slidesScrollDirection = Math.min(visibleSlidesFromCenter + this.props.slidesToScroll, this.props.slideCount - 1);
+              var slidesOppositeDirection = this.props.slideCount - slidesScrollDirection - 1;
+
+              if (direction > 0) {
+                slidesAfter = slidesScrollDirection;
+                slidesBefore = slidesOppositeDirection;
+              } else if (direction < 0) {
+                slidesBefore = slidesScrollDirection;
+                slidesAfter = slidesOppositeDirection;
+              }
+            }
+
+            break;
+
+          case 'right':
+            if (direction > 0) {
+              slidesBefore = this.props.slideCount - this.props.slidesToScroll - 1;
+              slidesAfter = this.props.slidesToScroll;
+            } else {
+              slidesBefore = this.props.slideCount - 1;
+              slidesAfter = 0;
+            }
+
+            break;
         }
@@ -186,2 +236,3 @@
   animation: PropTypes.oneOf(['zoom']),
+  cellAlign: PropTypes.string,
   cellSpacing: PropTypes.number,
@@ -196,2 +247,3 @@ currentSlide: PropTypes.number,
   slideHeight: PropTypes.number,
+  slidesToScroll: PropTypes.number,
   slideOffset: PropTypes.number,
@@ -205,2 +257,3 @@ slideWidth: PropTypes.number,
 ScrollTransition.defaultProps = {
+  cellAlign: 'left',
   cellSpacing: 0,
@@ -215,2 +268,3 @@ currentSlide: 0,
   slideHeight: 0,
+  slidesToScroll: 1,
   slideWidth: 0,
@@ -217,0 +271,0 @@ top: 0,

es/utilities/style-utilities.js

@@ -141,2 +141,3 @@ export var getImgTagStyles = function getImgTagStyles() {
     animation: props.animation,
+    cellAlign: props.cellAlign,
     cellSpacing: props.cellSpacing,
@@ -150,2 +151,3 @@ currentSlide: state.currentSlide,
     slideOffset: props.slideOffset,
+    slidesToScroll: props.slidesToScroll,
     slidesToShow: state.slidesToShow,
@@ -152,0 +154,0 @@ slideWidth: state.slideWidth,

lib/default-controls.js

@@ -36,3 +36,4 @@ "use strict";
     padding: 10,
-    opacity: disabled ? 0.3 : 1,
+    textTransform: 'uppercase',
+    opacity: disabled && 0.3,
     cursor: disabled ? 'not-allowed' : 'pointer'
@@ -73,3 +74,3 @@ };
         type: "button"
-      }, "PREV");
+      }, "Prev");
     }
@@ -162,3 +163,3 @@ }]);
         type: "button"
-      }, "NEXT");
+      }, "Next");
     }
@@ -212,16 +213,10 @@ }]);
         position: 'relative',
+        top: -10,
+        display: 'flex',
         margin: 0,
-        top: -10,
-        padding: 0
+        padding: 0,
+        listStyleType: 'none'
       };
     }
   }, {
-    key: "getListItemStyles",
-    value: function getListItemStyles() {
-      return {
-        listStyleType: 'none',
-        display: 'inline-block'
-      };
-    }
-  }, {
     key: "getButtonStyles",
@@ -246,3 +241,2 @@ value: function getButtonStyles(active) {
         return _react["default"].createElement("li", {
-          style: _this3.getListItemStyles(),
           key: index,
@@ -255,12 +249,14 @@ className: _this3.props.currentSlide === index ? 'paging-item active' : 'paging-item'
           "aria-label": "slide ".concat(index + 1, " bullet")
-        }, _react["default"].createElement("span", {
+        }, _react["default"].createElement("svg", {
           className: "paging-dot",
+          width: "6",
+          height: "6"
+        }, _react["default"].createElement("circle", {
+          cx: "3",
+          cy: "3",
+          r: "3",
           style: {
-            display: 'inline-block',
-            borderRadius: '50%',
-            width: '6px',
-            height: '6px',
-            background: 'black'
+            fill: 'black'
           }
-        })));
+        }))));
       }));
@@ -267,0 +263,0 @@ }

lib/index.js

@@ -179,8 +179,11 @@ "use strict";
       }
+
+      this.getlockScrollEvents().lockTouchScroll();
     } // @TODO Remove deprecated componentWillReceiveProps with getDerivedStateFromProps
     // eslint-disable-next-line react/no-deprecated
+    // eslint-disable-next-line camelcase
 
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var slideCount = (0, _bootstrappingUtilities.getValidChildren)(nextProps.children).length;
@@ -259,2 +262,4 @@ var slideCountChanged = slideCount !== this.state.slideCount;
       }
+
+      this.getlockScrollEvents().unlockTouchScroll();
     }
@@ -303,5 +308,37 @@ }, {
   }, {
+    key: "getlockScrollEvents",
+    value: function getlockScrollEvents() {
+      var _this3 = this;
+
+      var blockEvent = function blockEvent(e) {
+        if (_this3.state.dragging) {
+          var direction = (0, _utilities.swipeDirection)(_this3.touchObject.startX, e.touches[0].pageX, _this3.touchObject.startY, e.touches[0].pageY, _this3.props.vertical);
+
+          if (direction !== 0) {
+            e.preventDefault();
+          }
+        }
+      };
+
+      var lockTouchScroll = function lockTouchScroll() {
+        document.addEventListener('touchmove', blockEvent, {
+          passive: false
+        });
+      };
+
+      var unlockTouchScroll = function unlockTouchScroll() {
+        document.addEventListener('touchmove', blockEvent, {
+          passive: false
+        });
+      };
+
+      return {
+        lockTouchScroll: lockTouchScroll,
+        unlockTouchScroll: unlockTouchScroll
+      };
+    }
+  }, {
     key: "getTouchEvents",
     value: function getTouchEvents() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -317,3 +354,3 @@ if (this.props.swiping === false) {
         onTouchStart: function onTouchStart(e) {
-          _this3.touchObject = {
+          _this4.touchObject = {
             startX: e.touches[0].pageX,
@@ -323,5 +360,5 @@ startY: e.touches[0].pageY
 
-          _this3.handleMouseOver();
+          _this4.handleMouseOver();
 
-          _this3.setState({
+          _this4.setState({
             dragging: true
@@ -331,3 +368,3 @@ });
         onTouchMove: function onTouchMove(e) {
-          var direction = (0, _utilities.swipeDirection)(_this3.touchObject.startX, e.touches[0].pageX, _this3.touchObject.startY, e.touches[0].pageY, _this3.props.vertical);
+          var direction = (0, _utilities.swipeDirection)(_this4.touchObject.startX, e.touches[0].pageX, _this4.touchObject.startY, e.touches[0].pageY, _this4.props.vertical);
 
@@ -338,12 +375,12 @@ if (direction !== 0) {
 
-          var length = _this3.props.vertical ? Math.round(Math.sqrt(Math.pow(e.touches[0].pageY - _this3.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.touches[0].pageX - _this3.touchObject.startX, 2)));
+          var length = _this4.props.vertical ? Math.round(Math.sqrt(Math.pow(e.touches[0].pageY - _this4.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.touches[0].pageX - _this4.touchObject.startX, 2)));
 
           if (length >= 10) {
-            if (_this3.clickDisabled === false) _this3.props.onDragStart(e);
-            _this3.clickDisabled = true;
+            if (_this4.clickDisabled === false) _this4.props.onDragStart(e);
+            _this4.clickDisabled = true;
           }
 
-          _this3.touchObject = {
-            startX: _this3.touchObject.startX,
-            startY: _this3.touchObject.startY,
+          _this4.touchObject = {
+            startX: _this4.touchObject.startX,
+            startY: _this4.touchObject.startY,
             endX: e.touches[0].pageX,
@@ -355,14 +392,14 @@ endY: e.touches[0].pageY,
 
-          _this3.setState({
-            left: _this3.props.vertical ? 0 : _this3.getTargetLeft(_this3.touchObject.length * _this3.touchObject.direction),
-            top: _this3.props.vertical ? _this3.getTargetLeft(_this3.touchObject.length * _this3.touchObject.direction) : 0
+          _this4.setState({
+            left: _this4.props.vertical ? 0 : _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction),
+            top: _this4.props.vertical ? _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction) : 0
           });
         },
         onTouchEnd: function onTouchEnd(e) {
-          _this3.handleSwipe(e);
+          _this4.handleSwipe(e);
 
-          _this3.handleMouseOut();
+          _this4.handleMouseOut();
         },
         onTouchCancel: function onTouchCancel(e) {
-          _this3.handleSwipe(e);
+          _this4.handleSwipe(e);
         }
@@ -374,3 +411,3 @@ };
     value: function getMouseEvents() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -388,3 +425,7 @@ if (this.props.dragging === false) {
         onMouseDown: function onMouseDown(e) {
-          _this4.touchObject = {
+          if (e.preventDefault) {
+            e.preventDefault();
+          }
+
+          _this5.touchObject = {
             startX: e.clientX,
@@ -394,3 +435,3 @@ startY: e.clientY
 
-          _this4.setState({
+          _this5.setState({
             dragging: true
@@ -400,7 +441,7 @@ });
         onMouseMove: function onMouseMove(e) {
-          if (!_this4.state.dragging) {
+          if (!_this5.state.dragging) {
             return;
           }
 
-          var direction = (0, _utilities.swipeDirection)(_this4.touchObject.startX, e.clientX, _this4.touchObject.startY, e.clientY, _this4.props.vertical);
+          var direction = (0, _utilities.swipeDirection)(_this5.touchObject.startX, e.clientX, _this5.touchObject.startY, e.clientY, _this5.props.vertical);
 
@@ -411,12 +452,12 @@ if (direction !== 0) {
 
-          var length = _this4.props.vertical ? Math.round(Math.sqrt(Math.pow(e.clientY - _this4.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.clientX - _this4.touchObject.startX, 2))); // prevents disabling click just because mouse moves a fraction of a pixel
+          var length = _this5.props.vertical ? Math.round(Math.sqrt(Math.pow(e.clientY - _this5.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.clientX - _this5.touchObject.startX, 2))); // prevents disabling click just because mouse moves a fraction of a pixel
 
           if (length >= 10) {
-            if (_this4.clickDisabled === false) _this4.props.onDragStart(e);
-            _this4.clickDisabled = true;
+            if (_this5.clickDisabled === false) _this5.props.onDragStart(e);
+            _this5.clickDisabled = true;
           }
 
-          _this4.touchObject = {
-            startX: _this4.touchObject.startX,
-            startY: _this4.touchObject.startY,
+          _this5.touchObject = {
+            startX: _this5.touchObject.startX,
+            startY: _this5.touchObject.startY,
             endX: e.clientX,
@@ -428,10 +469,10 @@ endY: e.clientY,
 
-          _this4.setState({
-            left: _this4.props.vertical ? 0 : _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction),
-            top: _this4.props.vertical ? _this4.getTargetLeft(_this4.touchObject.length * _this4.touchObject.direction) : 0
+          _this5.setState({
+            left: _this5.props.vertical ? 0 : _this5.getTargetLeft(_this5.touchObject.length * _this5.touchObject.direction),
+            top: _this5.props.vertical ? _this5.getTargetLeft(_this5.touchObject.length * _this5.touchObject.direction) : 0
           });
         },
         onMouseUp: function onMouseUp(e) {
-          if (_this4.touchObject.length === 0 || _this4.touchObject.length === undefined) {
-            _this4.setState({
+          if (_this5.touchObject.length === 0 || _this5.touchObject.length === undefined) {
+            _this5.setState({
               dragging: false
@@ -443,10 +484,10 @@ });
 
-          _this4.handleSwipe(e);
+          _this5.handleSwipe(e);
         },
         onMouseLeave: function onMouseLeave(e) {
-          if (!_this4.state.dragging) {
+          if (!_this5.state.dragging) {
             return;
           }
 
-          _this4.handleSwipe(e);
+          _this5.handleSwipe(e);
         }
@@ -504,3 +545,3 @@ };
     value: function handleSwipe() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -537,3 +578,3 @@ var slidesToShow = this.state.slidesToShow;
       this.timers.push(setTimeout(function () {
-        _this5.clickDisabled = false;
+        _this6.clickDisabled = false;
       }, 0));
@@ -722,3 +763,3 @@ this.touchObject = {};
     value: function goToSlide(index, props) {
-      var _this6 = this;
+      var _this7 = this;
 
@@ -750,16 +791,16 @@ if (props === undefined) {
             return {
-              left: props.vertical ? 0 : _this6.getTargetLeft(_this6.state.slideWidth, prevState.currentSlide),
-              top: props.vertical ? _this6.getTargetLeft(_this6.state.slideWidth, prevState.currentSlide) : 0,
+              left: props.vertical ? 0 : _this7.getTargetLeft(_this7.state.slideWidth, prevState.currentSlide),
+              top: props.vertical ? _this7.getTargetLeft(_this7.state.slideWidth, prevState.currentSlide) : 0,
               currentSlide: 0,
               isWrappingAround: true,
-              wrapToIndex: _this6.state.slideCount
+              wrapToIndex: _this7.state.slideCount
             };
           }, function () {
-            _this6.timers.push(setTimeout(function () {
-              _this6.resetAutoplay();
+            _this7.timers.push(setTimeout(function () {
+              _this7.resetAutoplay();
 
-              _this6.isTransitioning = false;
+              _this7.isTransitioning = false;
 
               if (index !== previousSlide) {
-                _this6.props.afterSlide(0);
+                _this7.props.afterSlide(0);
               }
@@ -774,4 +815,4 @@ }, props.speed));
             return {
-              left: props.vertical ? 0 : _this6.getTargetLeft(0, prevState.currentSlide),
-              top: props.vertical ? _this6.getTargetLeft(0, prevState.currentSlide) : 0,
+              left: props.vertical ? 0 : _this7.getTargetLeft(0, prevState.currentSlide),
+              top: props.vertical ? _this7.getTargetLeft(0, prevState.currentSlide) : 0,
               currentSlide: endSlide,
@@ -782,9 +823,9 @@ isWrappingAround: true,
           }, function () {
-            _this6.timers.push(setTimeout(function () {
-              _this6.resetAutoplay();
+            _this7.timers.push(setTimeout(function () {
+              _this7.resetAutoplay();
 
-              _this6.isTransitioning = false;
+              _this7.isTransitioning = false;
 
               if (index !== previousSlide) {
-                _this6.props.afterSlide(_this6.state.slideCount - 1);
+                _this7.props.afterSlide(_this7.state.slideCount - 1);
               }
@@ -801,9 +842,9 @@ }, props.speed));
       }, function () {
-        return _this6.timers.push(setTimeout(function () {
-          _this6.resetAutoplay();
+        return _this7.timers.push(setTimeout(function () {
+          _this7.resetAutoplay();
 
-          _this6.isTransitioning = false;
+          _this7.isTransitioning = false;
 
           if (index !== previousSlide) {
-            _this6.props.afterSlide(index);
+            _this7.props.afterSlide(index);
           }
@@ -939,3 +980,3 @@ }, props.speed));
     value: function setDimensions(props) {
-      var _this7 = this;
+      var _this8 = this;
 
@@ -977,3 +1018,3 @@ var stateCb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
 
-        _this7.setLeft();
+        _this8.setLeft();
       });
@@ -1009,3 +1050,3 @@ }
     value: function renderControls() {
-      var _this8 = this;
+      var _this9 = this;
 
@@ -1020,22 +1061,22 @@ if (this.props.withoutControls) {
               key = _ref.key;
-          var func = _this8.props[funcName];
+          var func = _this9.props[funcName];
           var controlChildren = func && typeof func === 'function' && func({
-            cellAlign: _this8.props.cellAlign,
-            cellSpacing: _this8.props.cellSpacing,
-            currentSlide: _this8.state.currentSlide,
-            frameWidth: _this8.state.frameWidth,
+            cellAlign: _this9.props.cellAlign,
+            cellSpacing: _this9.props.cellSpacing,
+            currentSlide: _this9.state.currentSlide,
+            frameWidth: _this9.state.frameWidth,
             goToSlide: function goToSlide(index) {
-              return _this8.goToSlide(index);
+              return _this9.goToSlide(index);
             },
             nextSlide: function nextSlide() {
-              return _this8.nextSlide();
+              return _this9.nextSlide();
             },
             previousSlide: function previousSlide() {
-              return _this8.previousSlide();
+              return _this9.previousSlide();
             },
-            slideCount: _this8.state.slideCount,
-            slidesToScroll: _this8.state.slidesToScroll,
-            slidesToShow: _this8.state.slidesToShow,
-            slideWidth: _this8.state.slideWidth,
-            wrapAround: _this8.props.wrapAround
+            slideCount: _this9.state.slideCount,
+            slidesToScroll: _this9.state.slidesToScroll,
+            slidesToShow: _this9.state.slidesToShow,
+            slideWidth: _this9.state.slideWidth,
+            wrapAround: _this9.props.wrapAround
           });
@@ -1053,3 +1094,3 @@ return controlChildren && _react["default"].createElement("div", {
     value: function render() {
-      var _this9 = this;
+      var _this10 = this;
 
@@ -1074,3 +1115,3 @@ var _this$state2 = this.state,
       return _react["default"].createElement("div", {
-        className: ['slider', this.props.className || ''].join(' '),
+        className: ['slider', this.props.className || ''].join(' ').trim(),
         style: _extends({}, (0, _styleUtilities.getSliderStyles)(this.props.width, this.props.height), this.props.style)
@@ -1085,3 +1126,3 @@ }, !this.props.autoplay && _react["default"].createElement(_announceSlide["default"], {
         ref: function ref(frame) {
-          return _this9.frame = frame;
+          return _this10.frame = frame;
         },
@@ -1098,7 +1139,7 @@ style: frameStyles
         update: function update() {
-          var _this9$getOffsetDelta = _this9.getOffsetDeltas(),
-              tx = _this9$getOffsetDelta.tx,
-              ty = _this9$getOffsetDelta.ty;
+          var _this10$getOffsetDelt = _this10.getOffsetDeltas(),
+              tx = _this10$getOffsetDelt.tx,
+              ty = _this10$getOffsetDelt.ty;
 
-          if (_this9.props.disableEdgeSwiping && !_this9.props.wrapAround && _this9.isEdgeSwiping()) {
+          if (_this10.props.disableEdgeSwiping && !_this10.props.wrapAround && _this10.isEdgeSwiping()) {
             return {};
@@ -1111,11 +1152,11 @@ } else {
                 duration: duration,
-                ease: _this9.state.easing
+                ease: _this10.state.easing
               },
               events: {
                 end: function end() {
-                  var newLeft = _this9.props.vertical ? 0 : _this9.getTargetLeft();
-                  var newTop = _this9.props.vertical ? _this9.getTargetLeft() : 0;
+                  var newLeft = _this10.props.vertical ? 0 : _this10.getTargetLeft();
+                  var newTop = _this10.props.vertical ? _this10.getTargetLeft() : 0;
 
-                  if (newLeft !== _this9.state.left || newTop !== _this9.state.top) {
-                    _this9.setState({
+                  if (newLeft !== _this10.state.left || newTop !== _this10.state.top) {
+                    _this10.setState({
                       left: newLeft,
@@ -1126,3 +1167,3 @@ top: newTop,
                     }, function () {
-                      _this9.setState({
+                      _this10.setState({
                         resetWrapAroundPosition: false
@@ -1140,3 +1181,3 @@ });
               ty = _ref2.ty;
-          return _react["default"].createElement(TransitionControl, _extends({}, (0, _styleUtilities.getTransitionProps)(_this9.props, _this9.state), {
+          return _react["default"].createElement(TransitionControl, _extends({}, (0, _styleUtilities.getTransitionProps)(_this10.props, _this10.state), {
             deltaX: tx,
@@ -1143,0 +1184,0 @@ deltaY: ty

lib/transitions/scroll-transition.js

@@ -70,3 +70,15 @@ "use strict";
       var targetPosition = (this.props.slideWidth + this.props.cellSpacing) * index;
-      var startSlide = Math.min(Math.abs(Math.floor(positionValue / this.props.slideWidth)), this.props.slideCount - 1);
+      var cellAlignOffset = 0;
+
+      switch (this.props.cellAlign) {
+        case 'center':
+          cellAlignOffset = (this.props.slideWidth + this.props.cellSpacing) * ((this.props.slidesToShow - 1) / 2);
+          break;
+
+        case 'right':
+          cellAlignOffset = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slidesToShow - 1);
+          break;
+      }
+
+      var startSlide = Math.min(Math.floor(Math.abs((positionValue - cellAlignOffset) / this.props.slideWidth)), this.props.slideCount - 1);
       var offset = 0;
@@ -82,9 +94,47 @@
         var direction = this.getSlideDirection(startSlide, this.props.currentSlide, this.props.isWrappingAround);
-        var slidesBefore = Math.floor((this.props.slideCount - 1) / 2);
-        var slidesAfter = this.props.slideCount - slidesBefore - 1;
+        var slidesBefore = 0;
+        var slidesAfter = 0;
 
-        if (direction < 0) {
-          var temp = slidesBefore;
-          slidesBefore = slidesAfter;
-          slidesAfter = temp;
+        switch (this.props.cellAlign) {
+          case 'left':
+            if (direction < 0) {
+              slidesBefore = this.props.slidesToScroll;
+              slidesAfter = this.props.slideCount - this.props.slidesToScroll - 1;
+            } else {
+              slidesBefore = 0;
+              slidesAfter = this.props.slideCount - 1;
+            }
+
+            break;
+
+          case 'center':
+            if (direction === 0) {
+              slidesBefore = Math.floor((this.props.slideCount - 1) / 2);
+              slidesAfter = this.props.slideCount - slidesBefore - 1;
+            } else {
+              var visibleSlidesFromCenter = Math.ceil((this.props.slidesToShow - 1) / 2);
+              var slidesScrollDirection = Math.min(visibleSlidesFromCenter + this.props.slidesToScroll, this.props.slideCount - 1);
+              var slidesOppositeDirection = this.props.slideCount - slidesScrollDirection - 1;
+
+              if (direction > 0) {
+                slidesAfter = slidesScrollDirection;
+                slidesBefore = slidesOppositeDirection;
+              } else if (direction < 0) {
+                slidesBefore = slidesScrollDirection;
+                slidesAfter = slidesOppositeDirection;
+              }
+            }
+
+            break;
+
+          case 'right':
+            if (direction > 0) {
+              slidesBefore = this.props.slideCount - this.props.slidesToScroll - 1;
+              slidesAfter = this.props.slidesToScroll;
+            } else {
+              slidesBefore = this.props.slideCount - 1;
+              slidesAfter = 0;
+            }
+
+            break;
         }
@@ -200,2 +250,3 @@
   animation: _propTypes["default"].oneOf(['zoom']),
+  cellAlign: _propTypes["default"].string,
   cellSpacing: _propTypes["default"].number,
@@ -210,2 +261,3 @@ currentSlide: _propTypes["default"].number,
   slideHeight: _propTypes["default"].number,
+  slidesToScroll: _propTypes["default"].number,
   slideOffset: _propTypes["default"].number,
@@ -219,2 +271,3 @@ slideWidth: _propTypes["default"].number,
 ScrollTransition.defaultProps = {
+  cellAlign: 'left',
   cellSpacing: 0,
@@ -229,2 +282,3 @@ currentSlide: 0,
   slideHeight: 0,
+  slidesToScroll: 1,
   slideWidth: 0,
@@ -231,0 +285,0 @@ top: 0,

lib/utilities/style-utilities.js

@@ -160,2 +160,3 @@ "use strict";
     animation: props.animation,
+    cellAlign: props.cellAlign,
     cellSpacing: props.cellSpacing,
@@ -169,2 +170,3 @@ currentSlide: state.currentSlide,
     slideOffset: props.slideOffset,
+    slidesToScroll: props.slidesToScroll,
     slidesToShow: state.slidesToShow,
@@ -171,0 +173,0 @@ slideWidth: state.slideWidth,

package.json

 {
   "name": "nuka-carousel",
-  "version": "4.5.12",
+  "version": "4.5.13",
   "description": "Pure React Carousel",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

246992

increased by2.54%

Lines of code

5232

increased by2.99%

No dependency changes