nuka-carousel - npm Package Compare versions

Comparing version 4.6.0 to 4.6.1

CHANGELOG.md

 # Nuka Changelog
 
+## 4.6.0 (2019-12-17)
+
+- Fixes for `leftAlign` added for heightMode="current" and heightMode="max"
+- [#614](https://github.com/FormidableLabs/nuka-carousel/pull/614) Remove getListItemStyles() from type definitions
+- [#619](https://github.com/FormidableLabs/nuka-carousel/pull/619) Configure keyboard keyCodes so default ones can be overridden
+- [#620](https://github.com/FormidableLabs/nuka-carousel/pull/620) Avoid redundant dimension calculations after a DOM mutation
+- [#621](https://github.com/FormidableLabs/nuka-carousel/pull/621) Add TS definition for renderAnnounceSlideMessage
+- [#625](https://github.com/FormidableLabs/nuka-carousel/pull/625) Fixes Issue 521: Initial height calculations will be repeated until successful.
+- [#626](https://github.com/FormidableLabs/nuka-carousel/pull/626) Height mode 'current' uses tallest visible slide
+- [#628](https://github.com/FormidableLabs/nuka-carousel/pull/628) Adding missing Type For keyCodeConfig prop
+
+
 ## 4.5.13 (2019-11-08)
@@ -4,0 +16,0 @@

es/default-controls.js

@@ -20,2 +20,3 @@ 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); }
 import React from 'react';
+import { getAlignmentOffset } from './utilities/style-utilities';
 
@@ -97,34 +98,24 @@ var defaultButtonStyles = function defaultButtonStyles(disabled) {
       var wrapAround = params.wrapAround,
+          cellAlign = params.cellAlign,
+          cellSpacing = params.cellSpacing,
+          currentSlide = params.currentSlide,
+          frameWidth = params.frameWidth,
+          slideCount = params.slideCount,
           slidesToShow = params.slidesToShow,
-          currentSlide = params.currentSlide,
-          cellAlign = params.cellAlign,
-          slideCount = params.slideCount;
+          slideWidth = params.slideWidth,
+          positionValue = params.positionValue;
       var buttonDisabled = false;
 
       if (!wrapAround) {
-        var lastSlideIndex = slideCount - 1;
-        var slidesShowing = slidesToShow;
-        var lastSlideOffset = 0;
-
-        switch (cellAlign) {
-          case 'center':
-            slidesShowing = (slidesToShow - 1) * 0.5;
-            lastSlideOffset = Math.floor(slidesToShow * 0.5) - 1;
-            break;
-
-          case 'right':
-            slidesShowing = 1;
-            break;
-        } //  this handles the case for left align with partially visible slides
-
-
-        if (!Number.isInteger(slidesShowing) && cellAlign === 'left') {
-          slidesShowing = 1;
-        }
-
-        if (slidesToShow > 1) {
-          buttonDisabled = currentSlide + slidesShowing > lastSlideIndex + lastSlideOffset;
-        } else {
-          buttonDisabled = currentSlide + 1 > lastSlideIndex;
-        }
+        var alignmentOffset = getAlignmentOffset(currentSlide, {
+          cellAlign: cellAlign,
+          cellSpacing: cellSpacing,
+          frameWidth: frameWidth,
+          slideWidth: slideWidth
+        });
+        var relativePosition = positionValue - alignmentOffset;
+        var width = slideWidth + cellSpacing;
+        var endOffset = cellAlign === 'center' ? 2 * alignmentOffset : alignmentOffset;
+        var endPosition = -width * slideCount + width * slidesToShow - endOffset;
+        buttonDisabled = relativePosition < endPosition || Math.abs(relativePosition - endPosition) < 0.01;
       }
@@ -138,13 +129,23 @@
       var _this$props = this.props,
+          top = _this$props.top,
+          left = _this$props.left,
           wrapAround = _this$props.wrapAround,
           slidesToShow = _this$props.slidesToShow,
+          cellAlign = _this$props.cellAlign,
+          cellSpacing = _this$props.cellSpacing,
           currentSlide = _this$props.currentSlide,
-          cellAlign = _this$props.cellAlign,
-          slideCount = _this$props.slideCount;
+          frameWidth = _this$props.frameWidth,
+          slideCount = _this$props.slideCount,
+          slideWidth = _this$props.slideWidth,
+          vertical = _this$props.vertical;
       var disabled = this.nextButtonDisabled({
         wrapAround: wrapAround,
         slidesToShow: slidesToShow,
+        cellAlign: cellAlign,
+        cellSpacing: cellSpacing,
         currentSlide: currentSlide,
-        cellAlign: cellAlign,
-        slideCount: slideCount
+        frameWidth: frameWidth,
+        slideCount: slideCount,
+        slideWidth: slideWidth,
+        positionValue: vertical ? top : left
       });
@@ -151,0 +152,0 @@ return React.createElement("button", {

es/index.js

@@ -36,3 +36,3 @@ 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); }
 import { addEvent, removeEvent, getPropsByTransitionMode, swipeDirection, shouldUpdate, calcSomeInitialState } from './utilities/utilities';
-import { getImgTagStyles, getDecoratorStyles, getSliderStyles, getFrameStyles, getTransitionProps } from './utilities/style-utilities';
+import { getAlignmentOffset, getImgTagStyles, getDecoratorStyles, getSliderStyles, getFrameStyles, getTransitionProps } from './utilities/style-utilities';
 import { addAccessibility, getValidChildren, getSlideHeight } from './utilities/bootstrapping-utilities';
@@ -660,28 +660,4 @@
     value: function getTargetLeft(touchOffset, slide) {
-      var offset;
       var target = slide || this.state.currentSlide;
-
-      switch (this.state.cellAlign) {
-        case 'left':
-          {
-            offset = 0;
-            offset -= this.props.cellSpacing * target;
-            break;
-          }
-
-        case 'center':
-          {
-            offset = (this.state.frameWidth - this.state.slideWidth) / 2;
-            offset -= this.props.cellSpacing * target;
-            break;
-          }
-
-        case 'right':
-          {
-            offset = this.state.frameWidth - this.state.slideWidth;
-            offset -= this.props.cellSpacing * target;
-            break;
-          }
-      }
-
+      var offset = getAlignmentOffset(target, _objectSpread({}, this.props, {}, this.state));
       var left = this.state.slideWidth * target;
@@ -852,4 +828,6 @@ var lastSlide = this.state.currentSlide > 0 && target + this.state.slidesToScroll >= this.state.slideCount;
         var offset = this.state.currentSlide + this.state.slidesToScroll;
-        var nextSlideIndex = this.props.cellAlign !== 'left' ? offset : Math.min(offset, childrenCount - slidesToShow);
-        this.goToSlide(nextSlideIndex);
+        var nextSlideIndex = this.props.cellAlign !== 'left' ? offset : Math.min(offset, childrenCount - slidesToShow); // If nextSlideIndex is larger than last index, then
+        // just navigate to last index
+
+        this.goToSlide(Math.min(nextSlideIndex, childrenCount - 1));
       }
@@ -944,4 +922,2 @@ }
     value: function setDimensions(props) {
-      var _this9 = this;
-
       var stateCb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -976,9 +952,5 @@ props = props || this.props;
         slideWidth: slideWidth,
-        cellAlign: cellAlign,
-        left: props.vertical ? 0 : this.getTargetLeft(),
-        top: props.vertical ? this.getTargetLeft() : 0
+        cellAlign: cellAlign
       }, function () {
         stateCb();
-
-        _this9.setLeft();
       });
@@ -1014,3 +986,3 @@ }
     value: function renderControls() {
-      var _this10 = this;
+      var _this9 = this;
 
@@ -1025,22 +997,25 @@ if (this.props.withoutControls) {
               key = _ref.key;
-          var func = _this10.props[funcName];
+          var func = _this9.props[funcName];
           var controlChildren = func && typeof func === 'function' && func({
-            cellAlign: _this10.props.cellAlign,
-            cellSpacing: _this10.props.cellSpacing,
-            currentSlide: _this10.state.currentSlide,
-            frameWidth: _this10.state.frameWidth,
+            top: _this9.state.top,
+            left: _this9.state.left,
+            cellAlign: _this9.props.cellAlign,
+            cellSpacing: _this9.props.cellSpacing,
+            currentSlide: _this9.state.currentSlide,
+            frameWidth: _this9.state.frameWidth,
             goToSlide: function goToSlide(index) {
-              return _this10.goToSlide(index);
+              return _this9.goToSlide(index);
             },
             nextSlide: function nextSlide() {
-              return _this10.nextSlide();
+              return _this9.nextSlide();
             },
             previousSlide: function previousSlide() {
-              return _this10.previousSlide();
+              return _this9.previousSlide();
             },
-            slideCount: _this10.state.slideCount,
-            slidesToScroll: _this10.state.slidesToScroll,
-            slidesToShow: _this10.state.slidesToShow,
-            slideWidth: _this10.state.slideWidth,
-            wrapAround: _this10.props.wrapAround
+            slideCount: _this9.state.slideCount,
+            slidesToScroll: _this9.state.slidesToScroll,
+            slidesToShow: _this9.state.slidesToShow,
+            slideWidth: _this9.state.slideWidth,
+            wrapAround: _this9.props.wrapAround,
+            vertical: _this9.props.vertical
           });
@@ -1058,3 +1033,3 @@ return controlChildren && React.createElement("div", {
     value: function render() {
-      var _this11 = this;
+      var _this10 = this;
 
@@ -1089,3 +1064,3 @@ var _this$state2 = this.state,
         ref: function ref(frame) {
-          return _this11.frame = frame;
+          return _this10.frame = frame;
         },
@@ -1102,7 +1077,7 @@ style: frameStyles
         update: function update() {
-          var _this11$getOffsetDelt = _this11.getOffsetDeltas(),
-              tx = _this11$getOffsetDelt.tx,
-              ty = _this11$getOffsetDelt.ty;
+          var _this10$getOffsetDelt = _this10.getOffsetDeltas(),
+              tx = _this10$getOffsetDelt.tx,
+              ty = _this10$getOffsetDelt.ty;
 
-          if (_this11.props.disableEdgeSwiping && !_this11.props.wrapAround && _this11.isEdgeSwiping()) {
+          if (_this10.props.disableEdgeSwiping && !_this10.props.wrapAround && _this10.isEdgeSwiping()) {
             return {};
@@ -1115,11 +1090,11 @@ } else {
                 duration: duration,
-                ease: _this11.state.easing
+                ease: _this10.state.easing
               },
               events: {
                 end: function end() {
-                  var newLeft = _this11.props.vertical ? 0 : _this11.getTargetLeft();
-                  var newTop = _this11.props.vertical ? _this11.getTargetLeft() : 0;
+                  var newLeft = _this10.props.vertical ? 0 : _this10.getTargetLeft();
+                  var newTop = _this10.props.vertical ? _this10.getTargetLeft() : 0;
 
-                  if (newLeft !== _this11.state.left || newTop !== _this11.state.top) {
-                    _this11.setState({
+                  if (newLeft !== _this10.state.left || newTop !== _this10.state.top) {
+                    _this10.setState({
                       left: newLeft,
@@ -1130,3 +1105,3 @@ top: newTop,
                     }, function () {
-                      _this11.setState({
+                      _this10.setState({
                         resetWrapAroundPosition: false
@@ -1144,3 +1119,3 @@ });
               ty = _ref2.ty;
-          return React.createElement(TransitionControl, _extends({}, getTransitionProps(_this11.props, _this11.state), {
+          return React.createElement(TransitionControl, _extends({}, getTransitionProps(_this10.props, _this10.state), {
             deltaX: tx,
@@ -1173,10 +1148,2 @@ deltaY: ty
   cellSpacing: PropTypes.number,
-  enableKeyboardControls: PropTypes.bool,
-  keyCodeConfig: PropTypes.exact({
-    previousSlide: PropTypes.arrayOf(PropTypes.number),
-    nextSlide: PropTypes.arrayOf(PropTypes.number),
-    firstSlide: PropTypes.arrayOf(PropTypes.number),
-    lastSlide: PropTypes.arrayOf(PropTypes.number),
-    pause: PropTypes.arrayOf(PropTypes.number)
-  }),
   disableAnimation: PropTypes.bool,
@@ -1187,2 +1154,3 @@ disableEdgeSwiping: PropTypes.bool,
   edgeEasing: PropTypes.string,
+  enableKeyboardControls: PropTypes.bool,
   frameOverflow: PropTypes.string,
@@ -1194,4 +1162,12 @@ framePadding: PropTypes.string,
   initialSlideWidth: PropTypes.number,
+  keyCodeConfig: PropTypes.exact({
+    previousSlide: PropTypes.arrayOf(PropTypes.number),
+    nextSlide: PropTypes.arrayOf(PropTypes.number),
+    firstSlide: PropTypes.arrayOf(PropTypes.number),
+    lastSlide: PropTypes.arrayOf(PropTypes.number),
+    pause: PropTypes.arrayOf(PropTypes.number)
+  }),
   onDragStart: PropTypes.func,
   onResize: PropTypes.func,
+  opacityScale: PropTypes.number,
   pauseOnHover: PropTypes.bool,
@@ -1209,2 +1185,3 @@ renderAnnounceSlideMessage: PropTypes.func,
   slideIndex: PropTypes.number,
+  slideListMargin: PropTypes.number,
   slideOffset: PropTypes.number,
@@ -1220,5 +1197,3 @@ slidesToScroll: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
   withoutControls: PropTypes.bool,
-  wrapAround: PropTypes.bool,
-  opacityScale: PropTypes.number,
-  slideListMargin: PropTypes.number
+  wrapAround: PropTypes.bool
 };
@@ -1234,4 +1209,2 @@ Carousel.defaultProps = {
   cellSpacing: 0,
-  enableKeyboardControls: false,
-  keyCodeConfig: {},
   disableAnimation: false,
@@ -1242,2 +1215,3 @@ disableEdgeSwiping: false,
   edgeEasing: 'easeElasticOut',
+  enableKeyboardControls: false,
   frameOverflow: 'hidden',
@@ -1247,2 +1221,3 @@ framePadding: '0px',
   heightMode: 'max',
+  keyCodeConfig: {},
   onDragStart: function onDragStart() {},
@@ -1262,2 +1237,3 @@ onResize: function onResize() {},
   slideIndex: 0,
+  slideListMargin: 10,
   slideOffset: 25,
@@ -1274,5 +1250,4 @@ slidesToScroll: 1,
   withoutControls: false,
-  wrapAround: false,
-  slideListMargin: 10
+  wrapAround: false
 };
 export { NextButton, PreviousButton, PagingDots };

es/transitions/3d-scroll-transition.js

@@ -21,2 +21,3 @@ 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); }
 import PropTypes from 'prop-types';
+import { getSlideHeight } from '../utilities/style-utilities';
 var MIN_ZOOM_SCALE = 0;
@@ -39,20 +40,6 @@ var MAX_ZOOM_SCALE = 1;
   }
+  /* eslint-disable complexity */
 
+
   _createClass(ScrollTransition3D, [{
-    key: "getSlideDirection",
-    value: function getSlideDirection(start, end, isWrapping) {
-      var direction = 0;
-      if (start === end) return direction;
-
-      if (isWrapping) {
-        direction = start < end ? -1 : 1;
-      } else {
-        direction = start < end ? 1 : -1;
-      }
-
-      return direction;
-    }
-    /* eslint-disable complexity */
-
-  }, {
     key: "getSlideTargetPosition",
@@ -88,4 +75,5 @@ value: function getSlideTargetPosition(index) {
           currentSlide = _this$props.currentSlide,
-          slidesToShow = _this$props.slidesToShow;
-      var positionValue = this.props.vertical ? top : left;
+          slidesToShow = _this$props.slidesToShow,
+          vertical = _this$props.vertical;
+      var positionValue = vertical ? top : left;
       return React.Children.map(children, function (child, index) {
@@ -121,3 +109,7 @@ var visible = _this2.getDistanceToCurrentSlide(index) <= slidesToShow / 2;
     value: function getDistanceToCurrentSlide(index) {
-      return this.props.wrapAround ? Math.min(Math.min(this.getDistance(index, 0) + this.getDistance(this.props.currentSlide, this.props.slideCount), this.getDistance(index, this.props.slideCount) + this.getDistance(this.props.currentSlide, 0)), this.getDistance(index, this.props.currentSlide)) : this.getDistance(index, this.props.currentSlide);
+      var _this$props2 = this.props,
+          wrapAround = _this$props2.wrapAround,
+          currentSlide = _this$props2.currentSlide,
+          slideCount = _this$props2.slideCount;
+      return wrapAround ? Math.min(Math.min(this.getDistance(index, 0) + this.getDistance(currentSlide, slideCount), this.getDistance(index, slideCount) + this.getDistance(currentSlide, 0)), this.getDistance(index, currentSlide)) : this.getDistance(index, currentSlide);
     }
@@ -127,6 +119,11 @@ }, {
     value: function getRelativeDistanceToCurrentSlide(index) {
-      if (this.props.wrapAround) {
-        var distanceByLeftEge = this.getDistance(index, 0) + this.getDistance(this.props.currentSlide, this.props.slideCount);
-        var distanceByRightEdge = this.getDistance(index, this.props.slideCount) + this.getDistance(this.props.currentSlide, 0);
-        var absoluteDirectDistance = this.getDistance(index, this.props.currentSlide);
+      var _this$props3 = this.props,
+          wrapAround = _this$props3.wrapAround,
+          currentSlide = _this$props3.currentSlide,
+          slideCount = _this$props3.slideCount;
+
+      if (wrapAround) {
+        var distanceByLeftEge = this.getDistance(index, 0) + this.getDistance(currentSlide, slideCount);
+        var distanceByRightEdge = this.getDistance(index, slideCount) + this.getDistance(currentSlide, 0);
+        var absoluteDirectDistance = this.getDistance(index, currentSlide);
         var minimumDistance = Math.min(Math.min(distanceByLeftEge, distanceByRightEdge), absoluteDirectDistance);
@@ -136,3 +133,3 @@
           case absoluteDirectDistance:
-            return index - this.props.currentSlide;
+            return index - currentSlide;
 
@@ -149,3 +146,3 @@ case distanceByLeftEge:
       } else {
-        return index - this.props.currentSlide;
+        return index - currentSlide;
       }
@@ -166,23 +163,28 @@ }
     value: function getSlideStyles(index, positionValue) {
+      var _this$props4 = this.props,
+          vertical = _this$props4.vertical,
+          slideCount = _this$props4.slideCount,
+          cellSpacing = _this$props4.cellSpacing,
+          slideWidth = _this$props4.slideWidth;
       var targetPosition = this.getSlideTargetPosition(index, positionValue);
       var transformScale = this.getTransformScale(index);
       return {
-        zIndex: this.props.slideCount - this.getDistanceToCurrentSlide(index),
         boxSizing: 'border-box',
-        display: this.props.vertical ? 'block' : 'inline-block',
-        height: 'auto',
-        left: this.props.vertical ? 0 : targetPosition,
+        display: vertical ? 'block' : 'inline-block',
+        height: getSlideHeight(this.props),
+        left: vertical ? 0 : targetPosition,
         listStyleType: 'none',
-        marginBottom: this.props.vertical ? this.props.cellSpacing / 2 : 'auto',
-        marginLeft: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
-        marginRight: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
-        marginTop: this.props.vertical ? this.props.cellSpacing / 2 : 'auto',
+        marginBottom: vertical ? cellSpacing / 2 : 'auto',
+        marginLeft: vertical ? 'auto' : cellSpacing / 2,
+        marginRight: vertical ? 'auto' : cellSpacing / 2,
+        marginTop: vertical ? cellSpacing / 2 : 'auto',
         MozBoxSizing: 'border-box',
+        opacity: this.getOpacityScale(index),
         position: 'absolute',
-        top: this.props.vertical ? targetPosition : 0,
+        top: vertical ? targetPosition : 0,
         transform: "scale(".concat(transformScale, ")"),
         transition: 'left 0.4s ease-out, transform 0.4s ease-out, opacity 0.4s ease-out',
         verticalAlign: 'top',
-        width: this.props.vertical ? '100%' : this.props.slideWidth,
-        opacity: this.getOpacityScale(index)
+        width: vertical ? '100%' : slideWidth,
+        zIndex: slideCount - this.getDistanceToCurrentSlide(index)
       };
@@ -227,7 +229,11 @@ }
   dragging: PropTypes.bool,
+  heightMode: PropTypes.oneOf(['first', 'current', 'max']),
   isWrappingAround: PropTypes.bool,
   left: PropTypes.number,
+  opacityScale: PropTypes.number,
   slideCount: PropTypes.number,
   slideHeight: PropTypes.number,
+  slideListMargin: PropTypes.number,
   slideOffset: PropTypes.number,
+  slidesToShow: PropTypes.number,
   slideWidth: PropTypes.number,
@@ -237,6 +243,3 @@ top: PropTypes.number,
   wrapAround: PropTypes.bool,
-  zoomScale: PropTypes.number,
-  opacityScale: PropTypes.number,
-  slidesToShow: PropTypes.number,
-  slideListMargin: PropTypes.number
+  zoomScale: PropTypes.number
 };
@@ -247,6 +250,10 @@ ScrollTransition3D.defaultProps = {
   dragging: false,
+  heightMode: 'max',
   isWrappingAround: false,
   left: 0,
+  opacityScale: 0.65,
   slideCount: 0,
   slideHeight: 0,
+  slideListMargin: 0,
+  slidesToShow: 3,
   slideWidth: 0,
@@ -256,6 +263,3 @@ top: 0,
   wrapAround: true,
-  zoomScale: 0.75,
-  opacityScale: 0.65,
-  slidesToShow: 3,
-  slideListMargin: 10
+  zoomScale: 0.75
 };

es/transitions/fade-transition.js

@@ -21,2 +21,3 @@ 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); }
 import PropTypes from 'prop-types';
+import { getSlideHeight } from '../utilities/style-utilities';
 
@@ -100,3 +101,3 @@ var FadeTransition =
         display: 'block',
-        height: 'auto',
+        height: getSlideHeight(this.props),
         left: data[index] ? data[index].left : 0,
@@ -161,2 +162,3 @@ listStyleType: 'none',
   dragging: PropTypes.bool,
+  heightMode: PropTypes.oneOf(['first', 'current', 'max']),
   isWrappingAround: PropTypes.bool,
@@ -178,2 +180,3 @@ left: PropTypes.number,
   dragging: false,
+  heightMode: 'max',
   isWrappingAround: false,
@@ -180,0 +183,0 @@ left: 0,

es/transitions/scroll-transition.js

@@ -21,2 +21,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); }
 import PropTypes from 'prop-types';
+import { getSlideHeight, getAlignmentOffset } from '../utilities/style-utilities';
+import { getSlideDirection } from '../utilities/utilities';
 var MIN_ZOOM_SCALE = 0;
@@ -39,105 +41,50 @@ var MAX_ZOOM_SCALE = 1;
   }
+  /* eslint-disable complexity */
 
+
   _createClass(ScrollTransition, [{
-    key: "getSlideDirection",
-    value: function getSlideDirection(start, end, isWrapping) {
-      var direction = 0;
-      if (start === end) return direction;
-
-      if (isWrapping) {
-        direction = start < end ? -1 : 1;
-      } else {
-        direction = start < end ? 1 : -1;
-      }
-
-      return direction;
-    }
-    /* eslint-disable complexity */
-
-  }, {
     key: "getSlideTargetPosition",
-    value: function getSlideTargetPosition(index, positionValue) {
-      var targetPosition = (this.props.slideWidth + this.props.cellSpacing) * index;
-      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);
+    value: function getSlideTargetPosition(currentSlideIndex, positionValue) {
       var offset = 0;
 
-      if (this.props.animation === 'zoom' && (this.props.currentSlide === index + 1 || this.props.currentSlide === 0 && index === this.props.children.length - 1)) {
+      if (this.props.animation === 'zoom' && (this.props.currentSlide === currentSlideIndex + 1 || this.props.currentSlide === 0 && currentSlideIndex === this.props.children.length - 1)) {
         offset = this.props.slideOffset;
-      } else if (this.props.animation === 'zoom' && (this.props.currentSlide === index - 1 || this.props.currentSlide === this.props.children.length - 1 && index === 0)) {
+      } else if (this.props.animation === 'zoom' && (this.props.currentSlide === currentSlideIndex - 1 || this.props.currentSlide === this.props.children.length - 1 && currentSlideIndex === 0)) {
         offset = -this.props.slideOffset;
       }
 
-      if (this.props.wrapAround && index !== startSlide) {
-        var direction = this.getSlideDirection(startSlide, this.props.currentSlide, this.props.isWrappingAround);
-        var slidesBefore = 0;
-        var slidesAfter = 0;
+      var targetPosition = (this.props.slideWidth + this.props.cellSpacing) * currentSlideIndex;
+      var alignmentOffset = getAlignmentOffset(currentSlideIndex, this.props);
+      var relativePosition = positionValue - alignmentOffset;
+      var startSlideIndex = Math.min(Math.abs(Math.floor(relativePosition / this.props.slideWidth)), this.props.slideCount - 1);
 
-        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;
-            }
+      if (this.props.wrapAround && currentSlideIndex !== startSlideIndex) {
+        var slidesOutOfView = Math.max(this.props.slideCount - Math.ceil(this.props.frameWidth / this.props.slideWidth), // Total slides in view
+        0);
+        var slidesOutOfViewBefore = Math.floor(slidesOutOfView / 2);
+        var slidesOutOfViewAfter = slidesOutOfView - slidesOutOfViewBefore;
+        var direction = getSlideDirection(startSlideIndex, this.props.currentSlide, this.props.isWrappingAround);
 
-            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;
+        if (direction < 0) {
+          var temp = slidesOutOfViewBefore;
+          slidesOutOfViewBefore = slidesOutOfViewAfter;
+          slidesOutOfViewAfter = temp;
         }
 
-        var distanceFromStart = Math.abs(startSlide - index);
+        var slidesInViewBefore = Math.ceil(alignmentOffset / this.props.slideWidth);
+        var slidesBefore = slidesInViewBefore + slidesOutOfViewBefore;
+        var slidesInViewAfter = Math.ceil((this.props.frameWidth - alignmentOffset) / this.props.slideWidth) - 1;
+        var slidesAfter = slidesInViewAfter + slidesOutOfViewAfter;
+        var distanceFromStart = Math.abs(startSlideIndex - currentSlideIndex);
 
-        if (index < startSlide) {
+        if (currentSlideIndex < startSlideIndex) {
           if (distanceFromStart > slidesBefore) {
-            targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount + index);
+            targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount + currentSlideIndex);
           }
         } else if (distanceFromStart > slidesAfter) {
-          targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount - index) * -1;
+          targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount - currentSlideIndex) * -1;
         }
       }
 
-      return targetPosition + offset;
+      return targetPosition + offset || 0;
     }
@@ -155,4 +102,5 @@ /* eslint-enable complexity */
           currentSlide = _this$props.currentSlide,
-          slidesToShow = _this$props.slidesToShow;
-      var positionValue = this.props.vertical ? top : left;
+          slidesToShow = _this$props.slidesToShow,
+          vertical = _this$props.vertical;
+      var positionValue = vertical ? top : left;
       return React.Children.map(children, function (child, index) {
@@ -175,3 +123,3 @@ var visible = index >= currentSlide && index < currentSlide + slidesToShow;
         display: this.props.vertical ? 'block' : 'inline-block',
-        height: 'auto',
+        height: getSlideHeight(this.props),
         left: this.props.vertical ? 0 : targetPosition,
@@ -244,2 +192,4 @@ listStyleType: 'none',
   dragging: PropTypes.bool,
+  frameWidth: PropTypes.number,
+  heightMode: PropTypes.oneOf(['first', 'current', 'max']),
   isWrappingAround: PropTypes.bool,
@@ -249,4 +199,4 @@ left: PropTypes.number,
   slideHeight: PropTypes.number,
+  slideOffset: PropTypes.number,
   slidesToScroll: PropTypes.number,
-  slideOffset: PropTypes.number,
   slideWidth: PropTypes.number,
@@ -265,2 +215,4 @@ top: PropTypes.number,
   dragging: false,
+  frameWidth: 0,
+  heightMode: 'max',
   isWrappingAround: false,
@@ -267,0 +219,0 @@ left: 0,

es/utilities/bootstrapping-utilities.js

@@ -0,1 +1,9 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 import React from 'react';
@@ -21,2 +29,20 @@ export var addAccessibility = function addAccessibility(children, slidesToShow) {
   return a > b ? a : b;
+};
+
+var getHeightOfSlide = function getHeightOfSlide(slide) {
+  if (!slide) {
+    return 0;
+  }
+
+  if (slide.children && slide.children.length > 0) {
+    // Need to convert slide.children from HTMLCollection
+    // to an array
+    var children = _toConsumableArray(slide.children);
+
+    return children.reduce(function (totalHeight, child) {
+      return totalHeight + child.offsetHeight;
+    }, 0);
+  } else {
+    return slide.offsetHeight;
+  }
 }; // end - is exclusive
@@ -34,3 +60,3 @@
     for (var i = start; i < end; i++) {
-      maxHeight = getMax(slides[i].offsetHeight, maxHeight);
+      maxHeight = getMax(getHeightOfSlide(slides[i]), maxHeight);
     }
@@ -40,11 +66,11 @@ } else if (start > end) {
     for (var _i = start; _i < slides.length; _i++) {
-      maxHeight = getMax(slides[_i].offsetHeight, maxHeight);
+      maxHeight = getMax(getHeightOfSlide(slides[_i]), maxHeight);
     }
 
     for (var _i2 = 0; _i2 < end; _i2++) {
-      maxHeight = getMax(slides[_i2].offsetHeight, maxHeight);
+      maxHeight = getMax(getHeightOfSlide(slides[_i2]), maxHeight);
     }
   } else {
     // start === end
-    maxHeight = slides[start].offsetHeight;
+    maxHeight = getHeightOfSlide(slides[start]);
   }
@@ -83,3 +109,3 @@
   } else {
-    return slides[currentSlide].offsetHeight;
+    return getHeightOfSlide(slides[currentSlide]);
   }
@@ -99,3 +125,3 @@ };
   if (firstSlide && heightMode === 'first') {
-    return vertical ? firstSlide.offsetHeight * slidesToShow : firstSlide.offsetHeight;
+    return vertical ? getHeightOfSlide(firstSlide) * slidesToShow : getHeightOfSlide(firstSlide);
   }
@@ -102,0 +128,0 @@

es/utilities/style-utilities.js

@@ -0,4 +1,40 @@
+import React from 'react';
 export var getImgTagStyles = function getImgTagStyles() {
   return ".slider-slide > img { width: 100%; display: block; }\n          .slider-slide > img:focus { margin: auto; }";
 };
+export var getSlideHeight = function getSlideHeight(props) {
+  var childCount = React.Children.count(props.children);
+  var listWidth = props.slideWidth * childCount;
+  var spacingOffset = props.cellSpacing * childCount;
+  var calculatedHeight = props.vertical ? listWidth + spacingOffset : props.slideHeight;
+  return calculatedHeight > 0 && props.heightMode !== 'current' ? calculatedHeight : 'auto';
+};
+export var getAlignmentOffset = function getAlignmentOffset(slideIndex, config) {
+  var offset = 0;
+
+  switch (config.cellAlign) {
+    case 'left':
+      {
+        offset = 0;
+        offset -= config.cellSpacing * slideIndex;
+        break;
+      }
+
+    case 'center':
+      {
+        offset = (config.frameWidth - config.slideWidth) / 2;
+        offset -= config.cellSpacing * slideIndex;
+        break;
+      }
+
+    case 'right':
+      {
+        offset = config.frameWidth - config.slideWidth;
+        offset -= config.cellSpacing * slideIndex;
+        break;
+      }
+  }
+
+  return offset;
+};
 export var getDecoratorStyles = function getDecoratorStyles(position) {
@@ -145,2 +181,4 @@ switch (position) {
     dragging: props.dragging,
+    frameWidth: parseInt(state.frameWidth),
+    heightMode: props.heightMode,
     isWrappingAround: state.isWrappingAround,
@@ -147,0 +185,0 @@ left: state.left,

es/utilities/utilities.js

@@ -128,2 +128,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 };
+export var getSlideDirection = function getSlideDirection(start, end, isWrapping) {
+  var direction = 0;
+  if (start === end) return direction;
+
+  if (isWrapping) {
+    direction = start < end ? -1 : 1;
+  } else {
+    direction = start < end ? 1 : -1;
+  }
+
+  return direction;
+};
 export var shouldUpdate = function shouldUpdate(curr, next, keys) {
@@ -130,0 +142,0 @@ var update = false;

lib/default-controls.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _styleUtilities = require("./utilities/style-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -109,34 +111,24 @@
       var wrapAround = params.wrapAround,
+          cellAlign = params.cellAlign,
+          cellSpacing = params.cellSpacing,
+          currentSlide = params.currentSlide,
+          frameWidth = params.frameWidth,
+          slideCount = params.slideCount,
           slidesToShow = params.slidesToShow,
-          currentSlide = params.currentSlide,
-          cellAlign = params.cellAlign,
-          slideCount = params.slideCount;
+          slideWidth = params.slideWidth,
+          positionValue = params.positionValue;
       var buttonDisabled = false;
 
       if (!wrapAround) {
-        var lastSlideIndex = slideCount - 1;
-        var slidesShowing = slidesToShow;
-        var lastSlideOffset = 0;
-
-        switch (cellAlign) {
-          case 'center':
-            slidesShowing = (slidesToShow - 1) * 0.5;
-            lastSlideOffset = Math.floor(slidesToShow * 0.5) - 1;
-            break;
-
-          case 'right':
-            slidesShowing = 1;
-            break;
-        } //  this handles the case for left align with partially visible slides
-
-
-        if (!Number.isInteger(slidesShowing) && cellAlign === 'left') {
-          slidesShowing = 1;
-        }
-
-        if (slidesToShow > 1) {
-          buttonDisabled = currentSlide + slidesShowing > lastSlideIndex + lastSlideOffset;
-        } else {
-          buttonDisabled = currentSlide + 1 > lastSlideIndex;
-        }
+        var alignmentOffset = (0, _styleUtilities.getAlignmentOffset)(currentSlide, {
+          cellAlign: cellAlign,
+          cellSpacing: cellSpacing,
+          frameWidth: frameWidth,
+          slideWidth: slideWidth
+        });
+        var relativePosition = positionValue - alignmentOffset;
+        var width = slideWidth + cellSpacing;
+        var endOffset = cellAlign === 'center' ? 2 * alignmentOffset : alignmentOffset;
+        var endPosition = -width * slideCount + width * slidesToShow - endOffset;
+        buttonDisabled = relativePosition < endPosition || Math.abs(relativePosition - endPosition) < 0.01;
       }
@@ -150,13 +142,23 @@
       var _this$props = this.props,
+          top = _this$props.top,
+          left = _this$props.left,
           wrapAround = _this$props.wrapAround,
           slidesToShow = _this$props.slidesToShow,
+          cellAlign = _this$props.cellAlign,
+          cellSpacing = _this$props.cellSpacing,
           currentSlide = _this$props.currentSlide,
-          cellAlign = _this$props.cellAlign,
-          slideCount = _this$props.slideCount;
+          frameWidth = _this$props.frameWidth,
+          slideCount = _this$props.slideCount,
+          slideWidth = _this$props.slideWidth,
+          vertical = _this$props.vertical;
       var disabled = this.nextButtonDisabled({
         wrapAround: wrapAround,
         slidesToShow: slidesToShow,
+        cellAlign: cellAlign,
+        cellSpacing: cellSpacing,
         currentSlide: currentSlide,
-        cellAlign: cellAlign,
-        slideCount: slideCount
+        frameWidth: frameWidth,
+        slideCount: slideCount,
+        slideWidth: slideWidth,
+        positionValue: vertical ? top : left
       });
@@ -163,0 +165,0 @@ return _react["default"].createElement("button", {

lib/index.js

@@ -698,28 +698,4 @@ "use strict";
     value: function getTargetLeft(touchOffset, slide) {
-      var offset;
       var target = slide || this.state.currentSlide;
-
-      switch (this.state.cellAlign) {
-        case 'left':
-          {
-            offset = 0;
-            offset -= this.props.cellSpacing * target;
-            break;
-          }
-
-        case 'center':
-          {
-            offset = (this.state.frameWidth - this.state.slideWidth) / 2;
-            offset -= this.props.cellSpacing * target;
-            break;
-          }
-
-        case 'right':
-          {
-            offset = this.state.frameWidth - this.state.slideWidth;
-            offset -= this.props.cellSpacing * target;
-            break;
-          }
-      }
-
+      var offset = (0, _styleUtilities.getAlignmentOffset)(target, _objectSpread({}, this.props, {}, this.state));
       var left = this.state.slideWidth * target;
@@ -890,4 +866,6 @@ var lastSlide = this.state.currentSlide > 0 && target + this.state.slidesToScroll >= this.state.slideCount;
         var offset = this.state.currentSlide + this.state.slidesToScroll;
-        var nextSlideIndex = this.props.cellAlign !== 'left' ? offset : Math.min(offset, childrenCount - slidesToShow);
-        this.goToSlide(nextSlideIndex);
+        var nextSlideIndex = this.props.cellAlign !== 'left' ? offset : Math.min(offset, childrenCount - slidesToShow); // If nextSlideIndex is larger than last index, then
+        // just navigate to last index
+
+        this.goToSlide(Math.min(nextSlideIndex, childrenCount - 1));
       }
@@ -982,4 +960,2 @@ }
     value: function setDimensions(props) {
-      var _this9 = this;
-
       var stateCb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -1014,9 +990,5 @@ props = props || this.props;
         slideWidth: slideWidth,
-        cellAlign: cellAlign,
-        left: props.vertical ? 0 : this.getTargetLeft(),
-        top: props.vertical ? this.getTargetLeft() : 0
+        cellAlign: cellAlign
       }, function () {
         stateCb();
-
-        _this9.setLeft();
       });
@@ -1052,3 +1024,3 @@ }
     value: function renderControls() {
-      var _this10 = this;
+      var _this9 = this;
 
@@ -1063,22 +1035,25 @@ if (this.props.withoutControls) {
               key = _ref.key;
-          var func = _this10.props[funcName];
+          var func = _this9.props[funcName];
           var controlChildren = func && typeof func === 'function' && func({
-            cellAlign: _this10.props.cellAlign,
-            cellSpacing: _this10.props.cellSpacing,
-            currentSlide: _this10.state.currentSlide,
-            frameWidth: _this10.state.frameWidth,
+            top: _this9.state.top,
+            left: _this9.state.left,
+            cellAlign: _this9.props.cellAlign,
+            cellSpacing: _this9.props.cellSpacing,
+            currentSlide: _this9.state.currentSlide,
+            frameWidth: _this9.state.frameWidth,
             goToSlide: function goToSlide(index) {
-              return _this10.goToSlide(index);
+              return _this9.goToSlide(index);
             },
             nextSlide: function nextSlide() {
-              return _this10.nextSlide();
+              return _this9.nextSlide();
             },
             previousSlide: function previousSlide() {
-              return _this10.previousSlide();
+              return _this9.previousSlide();
             },
-            slideCount: _this10.state.slideCount,
-            slidesToScroll: _this10.state.slidesToScroll,
-            slidesToShow: _this10.state.slidesToShow,
-            slideWidth: _this10.state.slideWidth,
-            wrapAround: _this10.props.wrapAround
+            slideCount: _this9.state.slideCount,
+            slidesToScroll: _this9.state.slidesToScroll,
+            slidesToShow: _this9.state.slidesToShow,
+            slideWidth: _this9.state.slideWidth,
+            wrapAround: _this9.props.wrapAround,
+            vertical: _this9.props.vertical
           });
@@ -1096,3 +1071,3 @@ return controlChildren && _react["default"].createElement("div", {
     value: function render() {
-      var _this11 = this;
+      var _this10 = this;
 
@@ -1127,3 +1102,3 @@ var _this$state2 = this.state,
         ref: function ref(frame) {
-          return _this11.frame = frame;
+          return _this10.frame = frame;
         },
@@ -1140,7 +1115,7 @@ style: frameStyles
         update: function update() {
-          var _this11$getOffsetDelt = _this11.getOffsetDeltas(),
-              tx = _this11$getOffsetDelt.tx,
-              ty = _this11$getOffsetDelt.ty;
+          var _this10$getOffsetDelt = _this10.getOffsetDeltas(),
+              tx = _this10$getOffsetDelt.tx,
+              ty = _this10$getOffsetDelt.ty;
 
-          if (_this11.props.disableEdgeSwiping && !_this11.props.wrapAround && _this11.isEdgeSwiping()) {
+          if (_this10.props.disableEdgeSwiping && !_this10.props.wrapAround && _this10.isEdgeSwiping()) {
             return {};
@@ -1153,11 +1128,11 @@ } else {
                 duration: duration,
-                ease: _this11.state.easing
+                ease: _this10.state.easing
               },
               events: {
                 end: function end() {
-                  var newLeft = _this11.props.vertical ? 0 : _this11.getTargetLeft();
-                  var newTop = _this11.props.vertical ? _this11.getTargetLeft() : 0;
+                  var newLeft = _this10.props.vertical ? 0 : _this10.getTargetLeft();
+                  var newTop = _this10.props.vertical ? _this10.getTargetLeft() : 0;
 
-                  if (newLeft !== _this11.state.left || newTop !== _this11.state.top) {
-                    _this11.setState({
+                  if (newLeft !== _this10.state.left || newTop !== _this10.state.top) {
+                    _this10.setState({
                       left: newLeft,
@@ -1168,3 +1143,3 @@ top: newTop,
                     }, function () {
-                      _this11.setState({
+                      _this10.setState({
                         resetWrapAroundPosition: false
@@ -1182,3 +1157,3 @@ });
               ty = _ref2.ty;
-          return _react["default"].createElement(TransitionControl, _extends({}, (0, _styleUtilities.getTransitionProps)(_this11.props, _this11.state), {
+          return _react["default"].createElement(TransitionControl, _extends({}, (0, _styleUtilities.getTransitionProps)(_this10.props, _this10.state), {
             deltaX: tx,
@@ -1211,10 +1186,2 @@ deltaY: ty
   cellSpacing: _propTypes["default"].number,
-  enableKeyboardControls: _propTypes["default"].bool,
-  keyCodeConfig: _propTypes["default"].exact({
-    previousSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
-    nextSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
-    firstSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
-    lastSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
-    pause: _propTypes["default"].arrayOf(_propTypes["default"].number)
-  }),
   disableAnimation: _propTypes["default"].bool,
@@ -1225,2 +1192,3 @@ disableEdgeSwiping: _propTypes["default"].bool,
   edgeEasing: _propTypes["default"].string,
+  enableKeyboardControls: _propTypes["default"].bool,
   frameOverflow: _propTypes["default"].string,
@@ -1232,4 +1200,12 @@ framePadding: _propTypes["default"].string,
   initialSlideWidth: _propTypes["default"].number,
+  keyCodeConfig: _propTypes["default"].exact({
+    previousSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
+    nextSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
+    firstSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
+    lastSlide: _propTypes["default"].arrayOf(_propTypes["default"].number),
+    pause: _propTypes["default"].arrayOf(_propTypes["default"].number)
+  }),
   onDragStart: _propTypes["default"].func,
   onResize: _propTypes["default"].func,
+  opacityScale: _propTypes["default"].number,
   pauseOnHover: _propTypes["default"].bool,
@@ -1247,2 +1223,3 @@ renderAnnounceSlideMessage: _propTypes["default"].func,
   slideIndex: _propTypes["default"].number,
+  slideListMargin: _propTypes["default"].number,
   slideOffset: _propTypes["default"].number,
@@ -1258,5 +1235,3 @@ slidesToScroll: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].oneOf(['auto'])]),
   withoutControls: _propTypes["default"].bool,
-  wrapAround: _propTypes["default"].bool,
-  opacityScale: _propTypes["default"].number,
-  slideListMargin: _propTypes["default"].number
+  wrapAround: _propTypes["default"].bool
 };
@@ -1272,4 +1247,2 @@ Carousel.defaultProps = {
   cellSpacing: 0,
-  enableKeyboardControls: false,
-  keyCodeConfig: {},
   disableAnimation: false,
@@ -1280,2 +1253,3 @@ disableEdgeSwiping: false,
   edgeEasing: 'easeElasticOut',
+  enableKeyboardControls: false,
   frameOverflow: 'hidden',
@@ -1285,2 +1259,3 @@ framePadding: '0px',
   heightMode: 'max',
+  keyCodeConfig: {},
   onDragStart: function onDragStart() {},
@@ -1300,2 +1275,3 @@ onResize: function onResize() {},
   slideIndex: 0,
+  slideListMargin: 10,
   slideOffset: 25,
@@ -1312,4 +1288,3 @@ slidesToScroll: 1,
   withoutControls: false,
-  wrapAround: false,
-  slideListMargin: 10
+  wrapAround: false
 };

lib/transitions/3d-scroll-transition.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _styleUtilities = require("../utilities/style-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -50,20 +52,6 @@
   }
+  /* eslint-disable complexity */
 
+
   _createClass(ScrollTransition3D, [{
-    key: "getSlideDirection",
-    value: function getSlideDirection(start, end, isWrapping) {
-      var direction = 0;
-      if (start === end) return direction;
-
-      if (isWrapping) {
-        direction = start < end ? -1 : 1;
-      } else {
-        direction = start < end ? 1 : -1;
-      }
-
-      return direction;
-    }
-    /* eslint-disable complexity */
-
-  }, {
     key: "getSlideTargetPosition",
@@ -99,4 +87,5 @@ value: function getSlideTargetPosition(index) {
           currentSlide = _this$props.currentSlide,
-          slidesToShow = _this$props.slidesToShow;
-      var positionValue = this.props.vertical ? top : left;
+          slidesToShow = _this$props.slidesToShow,
+          vertical = _this$props.vertical;
+      var positionValue = vertical ? top : left;
       return _react["default"].Children.map(children, function (child, index) {
@@ -132,3 +121,7 @@ var visible = _this2.getDistanceToCurrentSlide(index) <= slidesToShow / 2;
     value: function getDistanceToCurrentSlide(index) {
-      return this.props.wrapAround ? Math.min(Math.min(this.getDistance(index, 0) + this.getDistance(this.props.currentSlide, this.props.slideCount), this.getDistance(index, this.props.slideCount) + this.getDistance(this.props.currentSlide, 0)), this.getDistance(index, this.props.currentSlide)) : this.getDistance(index, this.props.currentSlide);
+      var _this$props2 = this.props,
+          wrapAround = _this$props2.wrapAround,
+          currentSlide = _this$props2.currentSlide,
+          slideCount = _this$props2.slideCount;
+      return wrapAround ? Math.min(Math.min(this.getDistance(index, 0) + this.getDistance(currentSlide, slideCount), this.getDistance(index, slideCount) + this.getDistance(currentSlide, 0)), this.getDistance(index, currentSlide)) : this.getDistance(index, currentSlide);
     }
@@ -138,6 +131,11 @@ }, {
     value: function getRelativeDistanceToCurrentSlide(index) {
-      if (this.props.wrapAround) {
-        var distanceByLeftEge = this.getDistance(index, 0) + this.getDistance(this.props.currentSlide, this.props.slideCount);
-        var distanceByRightEdge = this.getDistance(index, this.props.slideCount) + this.getDistance(this.props.currentSlide, 0);
-        var absoluteDirectDistance = this.getDistance(index, this.props.currentSlide);
+      var _this$props3 = this.props,
+          wrapAround = _this$props3.wrapAround,
+          currentSlide = _this$props3.currentSlide,
+          slideCount = _this$props3.slideCount;
+
+      if (wrapAround) {
+        var distanceByLeftEge = this.getDistance(index, 0) + this.getDistance(currentSlide, slideCount);
+        var distanceByRightEdge = this.getDistance(index, slideCount) + this.getDistance(currentSlide, 0);
+        var absoluteDirectDistance = this.getDistance(index, currentSlide);
         var minimumDistance = Math.min(Math.min(distanceByLeftEge, distanceByRightEdge), absoluteDirectDistance);
@@ -147,3 +145,3 @@
           case absoluteDirectDistance:
-            return index - this.props.currentSlide;
+            return index - currentSlide;
 
@@ -160,3 +158,3 @@ case distanceByLeftEge:
       } else {
-        return index - this.props.currentSlide;
+        return index - currentSlide;
       }
@@ -177,23 +175,28 @@ }
     value: function getSlideStyles(index, positionValue) {
+      var _this$props4 = this.props,
+          vertical = _this$props4.vertical,
+          slideCount = _this$props4.slideCount,
+          cellSpacing = _this$props4.cellSpacing,
+          slideWidth = _this$props4.slideWidth;
       var targetPosition = this.getSlideTargetPosition(index, positionValue);
       var transformScale = this.getTransformScale(index);
       return {
-        zIndex: this.props.slideCount - this.getDistanceToCurrentSlide(index),
         boxSizing: 'border-box',
-        display: this.props.vertical ? 'block' : 'inline-block',
-        height: 'auto',
-        left: this.props.vertical ? 0 : targetPosition,
+        display: vertical ? 'block' : 'inline-block',
+        height: (0, _styleUtilities.getSlideHeight)(this.props),
+        left: vertical ? 0 : targetPosition,
         listStyleType: 'none',
-        marginBottom: this.props.vertical ? this.props.cellSpacing / 2 : 'auto',
-        marginLeft: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
-        marginRight: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
-        marginTop: this.props.vertical ? this.props.cellSpacing / 2 : 'auto',
+        marginBottom: vertical ? cellSpacing / 2 : 'auto',
+        marginLeft: vertical ? 'auto' : cellSpacing / 2,
+        marginRight: vertical ? 'auto' : cellSpacing / 2,
+        marginTop: vertical ? cellSpacing / 2 : 'auto',
         MozBoxSizing: 'border-box',
+        opacity: this.getOpacityScale(index),
         position: 'absolute',
-        top: this.props.vertical ? targetPosition : 0,
+        top: vertical ? targetPosition : 0,
         transform: "scale(".concat(transformScale, ")"),
         transition: 'left 0.4s ease-out, transform 0.4s ease-out, opacity 0.4s ease-out',
         verticalAlign: 'top',
-        width: this.props.vertical ? '100%' : this.props.slideWidth,
-        opacity: this.getOpacityScale(index)
+        width: vertical ? '100%' : slideWidth,
+        zIndex: slideCount - this.getDistanceToCurrentSlide(index)
       };
@@ -240,7 +243,11 @@ }
   dragging: _propTypes["default"].bool,
+  heightMode: _propTypes["default"].oneOf(['first', 'current', 'max']),
   isWrappingAround: _propTypes["default"].bool,
   left: _propTypes["default"].number,
+  opacityScale: _propTypes["default"].number,
   slideCount: _propTypes["default"].number,
   slideHeight: _propTypes["default"].number,
+  slideListMargin: _propTypes["default"].number,
   slideOffset: _propTypes["default"].number,
+  slidesToShow: _propTypes["default"].number,
   slideWidth: _propTypes["default"].number,
@@ -250,6 +257,3 @@ top: _propTypes["default"].number,
   wrapAround: _propTypes["default"].bool,
-  zoomScale: _propTypes["default"].number,
-  opacityScale: _propTypes["default"].number,
-  slidesToShow: _propTypes["default"].number,
-  slideListMargin: _propTypes["default"].number
+  zoomScale: _propTypes["default"].number
 };
@@ -260,6 +264,10 @@ ScrollTransition3D.defaultProps = {
   dragging: false,
+  heightMode: 'max',
   isWrappingAround: false,
   left: 0,
+  opacityScale: 0.65,
   slideCount: 0,
   slideHeight: 0,
+  slideListMargin: 0,
+  slidesToShow: 3,
   slideWidth: 0,
@@ -269,6 +277,3 @@ top: 0,
   wrapAround: true,
-  zoomScale: 0.75,
-  opacityScale: 0.65,
-  slidesToShow: 3,
-  slideListMargin: 10
+  zoomScale: 0.75
 };

lib/transitions/fade-transition.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _styleUtilities = require("../utilities/style-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -110,3 +112,3 @@
         display: 'block',
-        height: 'auto',
+        height: (0, _styleUtilities.getSlideHeight)(this.props),
         left: data[index] ? data[index].left : 0,
@@ -171,2 +173,3 @@ listStyleType: 'none',
   dragging: _propTypes["default"].bool,
+  heightMode: _propTypes["default"].oneOf(['first', 'current', 'max']),
   isWrappingAround: _propTypes["default"].bool,
@@ -188,2 +191,3 @@ left: _propTypes["default"].number,
   dragging: false,
+  heightMode: 'max',
   isWrappingAround: false,
@@ -190,0 +194,0 @@ left: 0,

lib/transitions/scroll-transition.js

@@ -12,2 +12,6 @@ "use strict";
 
+var _styleUtilities = require("../utilities/style-utilities");
+
+var _utilities = require("../utilities/utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -50,105 +54,50 @@
   }
+  /* eslint-disable complexity */
 
+
   _createClass(ScrollTransition, [{
-    key: "getSlideDirection",
-    value: function getSlideDirection(start, end, isWrapping) {
-      var direction = 0;
-      if (start === end) return direction;
-
-      if (isWrapping) {
-        direction = start < end ? -1 : 1;
-      } else {
-        direction = start < end ? 1 : -1;
-      }
-
-      return direction;
-    }
-    /* eslint-disable complexity */
-
-  }, {
     key: "getSlideTargetPosition",
-    value: function getSlideTargetPosition(index, positionValue) {
-      var targetPosition = (this.props.slideWidth + this.props.cellSpacing) * index;
-      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);
+    value: function getSlideTargetPosition(currentSlideIndex, positionValue) {
       var offset = 0;
 
-      if (this.props.animation === 'zoom' && (this.props.currentSlide === index + 1 || this.props.currentSlide === 0 && index === this.props.children.length - 1)) {
+      if (this.props.animation === 'zoom' && (this.props.currentSlide === currentSlideIndex + 1 || this.props.currentSlide === 0 && currentSlideIndex === this.props.children.length - 1)) {
         offset = this.props.slideOffset;
-      } else if (this.props.animation === 'zoom' && (this.props.currentSlide === index - 1 || this.props.currentSlide === this.props.children.length - 1 && index === 0)) {
+      } else if (this.props.animation === 'zoom' && (this.props.currentSlide === currentSlideIndex - 1 || this.props.currentSlide === this.props.children.length - 1 && currentSlideIndex === 0)) {
         offset = -this.props.slideOffset;
       }
 
-      if (this.props.wrapAround && index !== startSlide) {
-        var direction = this.getSlideDirection(startSlide, this.props.currentSlide, this.props.isWrappingAround);
-        var slidesBefore = 0;
-        var slidesAfter = 0;
+      var targetPosition = (this.props.slideWidth + this.props.cellSpacing) * currentSlideIndex;
+      var alignmentOffset = (0, _styleUtilities.getAlignmentOffset)(currentSlideIndex, this.props);
+      var relativePosition = positionValue - alignmentOffset;
+      var startSlideIndex = Math.min(Math.abs(Math.floor(relativePosition / this.props.slideWidth)), this.props.slideCount - 1);
 
-        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;
-            }
+      if (this.props.wrapAround && currentSlideIndex !== startSlideIndex) {
+        var slidesOutOfView = Math.max(this.props.slideCount - Math.ceil(this.props.frameWidth / this.props.slideWidth), // Total slides in view
+        0);
+        var slidesOutOfViewBefore = Math.floor(slidesOutOfView / 2);
+        var slidesOutOfViewAfter = slidesOutOfView - slidesOutOfViewBefore;
+        var direction = (0, _utilities.getSlideDirection)(startSlideIndex, this.props.currentSlide, this.props.isWrappingAround);
 
-            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;
+        if (direction < 0) {
+          var temp = slidesOutOfViewBefore;
+          slidesOutOfViewBefore = slidesOutOfViewAfter;
+          slidesOutOfViewAfter = temp;
         }
 
-        var distanceFromStart = Math.abs(startSlide - index);
+        var slidesInViewBefore = Math.ceil(alignmentOffset / this.props.slideWidth);
+        var slidesBefore = slidesInViewBefore + slidesOutOfViewBefore;
+        var slidesInViewAfter = Math.ceil((this.props.frameWidth - alignmentOffset) / this.props.slideWidth) - 1;
+        var slidesAfter = slidesInViewAfter + slidesOutOfViewAfter;
+        var distanceFromStart = Math.abs(startSlideIndex - currentSlideIndex);
 
-        if (index < startSlide) {
+        if (currentSlideIndex < startSlideIndex) {
           if (distanceFromStart > slidesBefore) {
-            targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount + index);
+            targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount + currentSlideIndex);
           }
         } else if (distanceFromStart > slidesAfter) {
-          targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount - index) * -1;
+          targetPosition = (this.props.slideWidth + this.props.cellSpacing) * (this.props.slideCount - currentSlideIndex) * -1;
         }
       }
 
-      return targetPosition + offset;
+      return targetPosition + offset || 0;
     }
@@ -166,4 +115,5 @@ /* eslint-enable complexity */
           currentSlide = _this$props.currentSlide,
-          slidesToShow = _this$props.slidesToShow;
-      var positionValue = this.props.vertical ? top : left;
+          slidesToShow = _this$props.slidesToShow,
+          vertical = _this$props.vertical;
+      var positionValue = vertical ? top : left;
       return _react["default"].Children.map(children, function (child, index) {
@@ -186,3 +136,3 @@ var visible = index >= currentSlide && index < currentSlide + slidesToShow;
         display: this.props.vertical ? 'block' : 'inline-block',
-        height: 'auto',
+        height: (0, _styleUtilities.getSlideHeight)(this.props),
         left: this.props.vertical ? 0 : targetPosition,
@@ -258,2 +208,4 @@ listStyleType: 'none',
   dragging: _propTypes["default"].bool,
+  frameWidth: _propTypes["default"].number,
+  heightMode: _propTypes["default"].oneOf(['first', 'current', 'max']),
   isWrappingAround: _propTypes["default"].bool,
@@ -263,4 +215,4 @@ left: _propTypes["default"].number,
   slideHeight: _propTypes["default"].number,
+  slideOffset: _propTypes["default"].number,
   slidesToScroll: _propTypes["default"].number,
-  slideOffset: _propTypes["default"].number,
   slideWidth: _propTypes["default"].number,
@@ -279,2 +231,4 @@ top: _propTypes["default"].number,
   dragging: false,
+  frameWidth: 0,
+  heightMode: 'max',
   isWrappingAround: false,
@@ -281,0 +235,0 @@ left: 0,

lib/utilities/bootstrapping-utilities.js

@@ -12,2 +12,10 @@ "use strict";
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 var addAccessibility = function addAccessibility(children, slidesToShow) {
@@ -37,2 +45,20 @@ if (slidesToShow > 1) {
   return a > b ? a : b;
+};
+
+var getHeightOfSlide = function getHeightOfSlide(slide) {
+  if (!slide) {
+    return 0;
+  }
+
+  if (slide.children && slide.children.length > 0) {
+    // Need to convert slide.children from HTMLCollection
+    // to an array
+    var children = _toConsumableArray(slide.children);
+
+    return children.reduce(function (totalHeight, child) {
+      return totalHeight + child.offsetHeight;
+    }, 0);
+  } else {
+    return slide.offsetHeight;
+  }
 }; // end - is exclusive
@@ -50,3 +76,3 @@
     for (var i = start; i < end; i++) {
-      maxHeight = getMax(slides[i].offsetHeight, maxHeight);
+      maxHeight = getMax(getHeightOfSlide(slides[i]), maxHeight);
     }
@@ -56,11 +82,11 @@ } else if (start > end) {
     for (var _i = start; _i < slides.length; _i++) {
-      maxHeight = getMax(slides[_i].offsetHeight, maxHeight);
+      maxHeight = getMax(getHeightOfSlide(slides[_i]), maxHeight);
     }
 
     for (var _i2 = 0; _i2 < end; _i2++) {
-      maxHeight = getMax(slides[_i2].offsetHeight, maxHeight);
+      maxHeight = getMax(getHeightOfSlide(slides[_i2]), maxHeight);
     }
   } else {
     // start === end
-    maxHeight = slides[start].offsetHeight;
+    maxHeight = getHeightOfSlide(slides[start]);
   }
@@ -102,3 +128,3 @@
   } else {
-    return slides[currentSlide].offsetHeight;
+    return getHeightOfSlide(slides[currentSlide]);
   }
@@ -121,3 +147,3 @@ };
   if (firstSlide && heightMode === 'first') {
-    return vertical ? firstSlide.offsetHeight * slidesToShow : firstSlide.offsetHeight;
+    return vertical ? getHeightOfSlide(firstSlide) * slidesToShow : getHeightOfSlide(firstSlide);
   }
@@ -124,0 +150,0 @@

lib/utilities/style-utilities.js

@@ -6,4 +6,8 @@ "use strict";
 });
-exports.getTransitionProps = exports.getFrameStyles = exports.getSliderStyles = exports.getDecoratorStyles = exports.getImgTagStyles = void 0;
+exports.getTransitionProps = exports.getFrameStyles = exports.getSliderStyles = exports.getDecoratorStyles = exports.getAlignmentOffset = exports.getSlideHeight = exports.getImgTagStyles = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var getImgTagStyles = function getImgTagStyles() {
@@ -15,2 +19,44 @@ return ".slider-slide > img { width: 100%; display: block; }\n          .slider-slide > img:focus { margin: auto; }";
 
+var getSlideHeight = function getSlideHeight(props) {
+  var childCount = _react["default"].Children.count(props.children);
+
+  var listWidth = props.slideWidth * childCount;
+  var spacingOffset = props.cellSpacing * childCount;
+  var calculatedHeight = props.vertical ? listWidth + spacingOffset : props.slideHeight;
+  return calculatedHeight > 0 && props.heightMode !== 'current' ? calculatedHeight : 'auto';
+};
+
+exports.getSlideHeight = getSlideHeight;
+
+var getAlignmentOffset = function getAlignmentOffset(slideIndex, config) {
+  var offset = 0;
+
+  switch (config.cellAlign) {
+    case 'left':
+      {
+        offset = 0;
+        offset -= config.cellSpacing * slideIndex;
+        break;
+      }
+
+    case 'center':
+      {
+        offset = (config.frameWidth - config.slideWidth) / 2;
+        offset -= config.cellSpacing * slideIndex;
+        break;
+      }
+
+    case 'right':
+      {
+        offset = config.frameWidth - config.slideWidth;
+        offset -= config.cellSpacing * slideIndex;
+        break;
+      }
+  }
+
+  return offset;
+};
+
+exports.getAlignmentOffset = getAlignmentOffset;
+
 var getDecoratorStyles = function getDecoratorStyles(position) {
@@ -166,2 +212,4 @@ switch (position) {
     dragging: props.dragging,
+    frameWidth: parseInt(state.frameWidth),
+    heightMode: props.heightMode,
     isWrappingAround: state.isWrappingAround,
@@ -168,0 +216,0 @@ left: state.left,

lib/utilities/utilities.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.calcSomeInitialState = exports.shouldUpdate = exports.swipeDirection = exports.getPropsByTransitionMode = exports.addAccessibility = exports.removeEvent = exports.addEvent = void 0;
+exports.calcSomeInitialState = exports.shouldUpdate = exports.getSlideDirection = exports.swipeDirection = exports.getPropsByTransitionMode = exports.addAccessibility = exports.removeEvent = exports.addEvent = void 0;
 
@@ -154,2 +154,17 @@ var _react = _interopRequireDefault(require("react"));
 
+var getSlideDirection = function getSlideDirection(start, end, isWrapping) {
+  var direction = 0;
+  if (start === end) return direction;
+
+  if (isWrapping) {
+    direction = start < end ? -1 : 1;
+  } else {
+    direction = start < end ? 1 : -1;
+  }
+
+  return direction;
+};
+
+exports.getSlideDirection = getSlideDirection;
+
 var shouldUpdate = function shouldUpdate(curr, next, keys) {
@@ -156,0 +171,0 @@ var update = false;

package.json

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

README.md

@@ -7,3 +7,3 @@ [![Maintenance Status][maintenance-image]](#maintenance-status)
 
-Maintained by [Sarah Meyer](https://github.com/sarmeyer)
+Maintained by [Sarah Egan](https://github.com/sarmeyer)
 
@@ -54,3 +54,3 @@ ![Nuka Carousel Animated Example](https://i.imgur.com/UwP5gle.gif)
 
-Or on CodeSandBox at the following url: <a href="https://codesandbox.io/s/04wxloyyp" target="_blank">CodeSandBox Demo</a>
+Or on CodeSandBox at the following url: <a href="https://codesandbox.io/s/currying-smoke-c8v2n" target="_blank">CodeSandBox Demo</a>
 
@@ -81,3 +81,3 @@ ### Keyboard Controls
 | beforeSlide                | `React.PropTypes.func`                                                                                                                                                                                                                                                 | Hook to be called before a slide is changed                                                                                                                                                                                                                                                 |                                                                                                                    |
-| cellAlign                  | `React.PropTypes.oneOf(['left', 'center', 'right'])`                                                                                                                                                                                                                   | When displaying more than one slide, sets which position to anchor the current slide to. When `cellAlign='center'` or `cellAlign='right'`, keep `slidesToScroll` prop set to default.**Is overridden to `left` when `transitionMode="fade"`**                                               |                                                                                                                    |
+| cellAlign                  | `React.PropTypes.oneOf(['left', 'center', 'right'])`                                                                                                                                                                                                                   | When displaying more than one slide, sets which position to anchor the current slide to. **Is overridden to `left` when `transitionMode="fade"`**                                               |                                                                                                                    |
 | cellSpacing                | `React.PropTypes.number`                                                                                                                                                                                                                                               | Space between slides, as an integer, but reflected as `px`                                                                                                                                                                                                                                  |                                                                                                                    |
@@ -84,0 +84,0 @@ | enableKeyboardControls     | `React.PropTypes.bool`                                                                                                                                                                                                                                                 | When set to `true` will enable keyboard controls.                                                                                                                                                                                                                                           | `false`                                                                                                            |

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

262071

increased by1.92%

Lines of code

5223

increased by0.77%

No dependency changes