nuka-carousel - npm Package Compare versions

Comparing version 5.4.1 to 5.5.0

es/carousel.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _types = require("./types");
+
 var _controls = _interopRequireDefault(require("./controls"));
@@ -72,3 +74,3 @@
       beforeSlide = props.beforeSlide,
-      cellAlign = props.cellAlign,
+      propsCellAlign = props.cellAlign,
       cellSpacing = props.cellSpacing,
@@ -90,6 +92,7 @@ children = props.children,
       renderAnnounceSlideMessage = props.renderAnnounceSlideMessage,
-      scrollMode = props.scrollMode,
+      propsScrollMode = props.scrollMode,
       slideIndex = props.slideIndex,
       propsSlidesToScroll = props.slidesToScroll,
-      slidesToShow = props.slidesToShow,
+      propsSlidesToShow = props.slidesToShow,
+      slideWidth = props.slideWidth,
       speed = props.speed,
@@ -104,31 +107,75 @@ style = props.style,
   var slideCount = filteredSlides.length;
-  var slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll;
+  var cellAlign = slideWidth || propsSlidesToScroll === 'auto' ? 'left' : propsCellAlign;
+  var scrollMode = propsSlidesToScroll === 'auto' ? _types.ScrollMode.remainder : propsScrollMode;
 
-  var _useState = (0, _react.useState)(function () {
-    return (0, _utils.getDefaultSlideIndex)(slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode);
-  }),
+  var _useState = (0, _react.useState)(new Map()),
       _useState2 = _slicedToArray(_useState, 2),
-      currentSlide = _useState2[0],
-      setCurrentSlide = _useState2[1];
+      slideIOEntries = _useState2[0],
+      setSlideIOEntries = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var visibleCount = Array.from(slideIOEntries).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        visible = _ref2[1];
+
+    return visible;
+  }).length;
+
+  var _useState3 = (0, _react.useState)(visibleCount),
       _useState4 = _slicedToArray(_useState3, 2),
-      pause = _useState4[0],
-      setPause = _useState4[1];
+      constantVisibleCount = _useState4[0],
+      setConstantVisibleCount = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var slidesToShow = slideWidth ? constantVisibleCount : propsSlidesToShow;
+  var slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll === 'auto' ? Math.max(constantVisibleCount, 1) : propsSlidesToScroll;
+
+  var _useState5 = (0, _react.useState)(function () {
+    return (0, _utils.getDefaultSlideIndex)(slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode);
+  }),
       _useState6 = _slicedToArray(_useState5, 2),
-      isDragging = _useState6[0],
-      setIsDragging = _useState6[1];
+      currentSlide = _useState6[0],
+      setCurrentSlide = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(0),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      dragDistance = _useState8[0],
-      setDragDistance = _useState8[1];
+      pause = _useState8[0],
+      setPause = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(0),
+  var _useState9 = (0, _react.useState)(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      animationDistance = _useState10[0],
-      setAnimationDistance = _useState10[1];
+      isDragging = _useState10[0],
+      setIsDragging = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      dragDistance = _useState12[0],
+      setDragDistance = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      animationDistance = _useState14[0],
+      setAnimationDistance = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isAnimating = _useState16[0],
+      setIsAnimating = _useState16[1];
+
+  var updateSlideIOEntry = (0, _react.useCallback)(function (id, isFullyVisible) {
+    if (!!slideIOEntries.get(id) === isFullyVisible) return;
+    setSlideIOEntries(function (prev) {
+      var newMap = new Map(prev);
+      newMap.set(id, isFullyVisible);
+      return newMap;
+    });
+  }, [slideIOEntries]);
+  var prevDragged = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (isDragging) prevDragged.current = true;
+
+    if (!(isDragging || isAnimating)) {
+      // Wait for the animation to complete after dragging
+      if (!prevDragged.current) setConstantVisibleCount(visibleCount);
+      prevDragged.current = false;
+    }
+  }, [isAnimating, isDragging, visibleCount]);
   var prevXPosition = (0, _react.useRef)(null);
@@ -461,4 +508,4 @@ var preDragOffset = (0, _react.useRef)(0);
         key: "".concat(typeOfSlide, "-").concat(index),
+        id: "".concat(typeOfSlide, "-").concat(index),
         count: slideCount,
-        currentSlide: currentSlide,
         index: index,
@@ -470,9 +517,10 @@ isCurrentSlide: currentSlide === index,
         animation: animation,
-        slidesToShow: slidesToShow,
         speed: speed,
         zoomScale: zoomScale,
-        cellAlign: cellAlign,
         onVisibleSlideHeightChange: handleVisibleSlideHeightChange,
+        slideWidth: slideWidth,
+        updateIOEntry: updateSlideIOEntry,
         adaptiveHeight: adaptiveHeight,
-        initializedAdaptiveHeight: initializedAdaptiveHeight
+        initializedAdaptiveHeight: initializedAdaptiveHeight,
+        carouselRef: carouselRef
       }, child);
@@ -503,2 +551,3 @@ });
       outline: 'none',
+      touchAction: 'pan-y',
       height: frameHeight,
@@ -538,3 +587,5 @@ transition: adaptiveHeightAnimation ? 'height 300ms ease-in-out' : undefined,
     speed: speed,
-    wrapAround: wrapAround
+    slideWidth: slideWidth,
+    wrapAround: wrapAround,
+    setIsAnimating: setIsAnimating
   }, wrapAround ? renderSlides('prev-cloned') : null, renderSlides(), wrapAround ? renderSlides('next-cloned') : null)));
@@ -541,0 +592,0 @@ };

es/slide.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _utils = require("./utils");
+var _useSlideIntersectionObserver = require("./hooks/use-slide-intersection-observer");
 
@@ -23,4 +23,5 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var getSlideStyles = function getSlideStyles(count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight) {
-  var width = getSlideWidth(count, wrapAround);
+var getSlideStyles = function getSlideStyles(count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight, slideWidth) {
+  var width = slideWidth !== null && slideWidth !== void 0 ? slideWidth : getSlideWidth(count, wrapAround); // const width = getSlideWidth(count, wrapAround);
+
   var visibleSlideOpacity = isVisibleSlide ? 1 : 0;
@@ -49,3 +50,2 @@ var animationSpeed = animation === 'fade' ? 200 : 500;
     width: width,
-    flex: 1,
     height: height,
@@ -72,5 +72,6 @@ padding: "0 ".concat(cellSpacing ? cellSpacing / 2 : 0, "px"),
 var Slide = function Slide(_ref) {
+  var _entry$intersectionRa;
+
   var count = _ref.count,
       children = _ref.children,
-      currentSlide = _ref.currentSlide,
       index = _ref.index,
@@ -81,13 +82,19 @@ isCurrentSlide = _ref.isCurrentSlide,
       cellSpacing = _ref.cellSpacing,
+      slideWidth = _ref.slideWidth,
       animation = _ref.animation,
       speed = _ref.speed,
-      slidesToShow = _ref.slidesToShow,
       zoomScale = _ref.zoomScale,
-      cellAlign = _ref.cellAlign,
       onVisibleSlideHeightChange = _ref.onVisibleSlideHeightChange,
       adaptiveHeight = _ref.adaptiveHeight,
-      initializedAdaptiveHeight = _ref.initializedAdaptiveHeight;
+      initializedAdaptiveHeight = _ref.initializedAdaptiveHeight,
+      updateIOEntry = _ref.updateIOEntry,
+      id = _ref.id,
+      carouselRef = _ref.carouselRef;
   var customIndex = wrapAround ? generateIndex(index, count, typeOfSlide) : index;
-  var isVisible = (0, _utils.isSlideVisible)(currentSlide, customIndex, slidesToShow, cellAlign);
   var slideRef = (0, _react.useRef)(null);
+  var entry = (0, _useSlideIntersectionObserver.useSlideIntersectionObserver)(slideRef, carouselRef, function (entry) {
+    updateIOEntry(id, (entry === null || entry === void 0 ? void 0 : entry.intersectionRatio) >= 0.95);
+  });
+  var isVisible = !!(entry !== null && entry !== void 0 && entry.isIntersecting);
+  var isFullyVisible = ((_entry$intersectionRa = entry === null || entry === void 0 ? void 0 : entry.intersectionRatio) !== null && _entry$intersectionRa !== void 0 ? _entry$intersectionRa : 1) >= 0.95;
   var prevIsVisibleRef = (0, _react.useRef)(false);
@@ -101,9 +108,2 @@ (0, _react.useEffect)(function () {
       var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
-
-      if (isVisible) {
-        node.removeAttribute('inert');
-      } else {
-        node.setAttribute('inert', 'true');
-      }
-
       var prevIsVisible = prevIsVisibleRef.current;
@@ -119,8 +119,9 @@
     }
-  }, [adaptiveHeight, customIndex, isVisible, onVisibleSlideHeightChange, slidesToShow]);
-  var currentSlideClass = isCurrentSlide && isVisible ? ' slide-current' : '';
+  }, [customIndex, isVisible, onVisibleSlideHeightChange]);
+  var currentSlideClass = isCurrentSlide && isFullyVisible ? ' slide-current' : '';
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: slideRef,
-    className: "slide".concat(currentSlideClass).concat(typeOfSlide ? " ".concat(typeOfSlide) : '').concat(isVisible ? ' slide-visible' : ''),
-    style: getSlideStyles(count, isCurrentSlide, isVisible, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight)
+    inert: (!isFullyVisible).toString(),
+    className: "slide".concat(currentSlideClass).concat(typeOfSlide ? " ".concat(typeOfSlide) : '').concat(isFullyVisible ? ' slide-visible' : ''),
+    style: getSlideStyles(count, isCurrentSlide, isFullyVisible, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight, slideWidth)
   }, children);
@@ -127,0 +128,0 @@ };

es/slider-list.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -15,4 +17,6 @@ var _defaultControls = require("./default-controls");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var getPercentOffsetForSlide = function getPercentOffsetForSlide(currentSlide, slideCount, slidesToShow, cellAlign, wrapAround) {
@@ -62,6 +66,8 @@ // When wrapAround is enabled, we show the slides 3 times
       speed = _ref.speed,
-      wrapAround = _ref.wrapAround;
+      wrapAround = _ref.wrapAround,
+      slideWidth = _ref.slideWidth,
+      setIsAnimating = _ref.setIsAnimating;
   // When wrapAround is enabled, we show the slides 3 times
   var renderedSlideCount = wrapAround ? 3 * slideCount : slideCount;
-  var listVisibleWidth = "".concat(renderedSlideCount * 100 / slidesToShow, "%");
+  var listVisibleWidth = slideWidth ? "calc(".concat(slideWidth, " * ").concat(renderedSlideCount, ")") : "".concat(renderedSlideCount * 100 / slidesToShow, "%");
   var percentOffsetForSlideProps = [slideCount, slidesToShow, cellAlign, wrapAround]; // We recycle dot index generation to determine the leftmost and rightmost
@@ -107,2 +113,5 @@ // indices used, to be used in calculating the x-translation values we need
 
+  (0, _react.useEffect)(function () {
+    setIsAnimating(isAnimating);
+  }, [isAnimating, setIsAnimating]);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -109,0 +118,0 @@ ref: forwardedRef,

es/utils.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.isSlideVisible = exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.getDefaultSlideIndex = exports.getBoundedIndex = void 0;
+exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.getDefaultSlideIndex = exports.getBoundedIndex = void 0;
 
@@ -13,27 +13,2 @@ var _defaultControls = require("./default-controls");
 
-var isSlideVisible = function isSlideVisible(currentSlide, indexToCheck, slidesToShow, cellAlign) {
-  // The addition or subtraction of constants (1 , 0.5) in the following
-  // calculations are accounting for the fact that a slide will be visible even
-  // after the position associated with its index is off-screen. For example,
-  // with cellAlign="left", slidesToShow=1 and indexToCheck=0,
-  // if the currentSlide is set to 0.99, both (a sliver of) slide 0 and slide 1
-  // will be visible at the same time, even though the position we associate
-  // with index 0, its leftmost edge, is off-screen.
-  if (cellAlign === 'left') {
-    return indexToCheck < currentSlide + slidesToShow && indexToCheck > currentSlide - 1;
-  }
-
-  if (cellAlign === 'center') {
-    return indexToCheck > currentSlide - slidesToShow / 2 - 0.5 && indexToCheck <= currentSlide || indexToCheck > currentSlide && indexToCheck < currentSlide + slidesToShow / 2 + 0.5;
-  }
-
-  if (cellAlign === 'right') {
-    return indexToCheck < currentSlide + 1 && indexToCheck > currentSlide - slidesToShow;
-  }
-
-  return false;
-};
-
-exports.isSlideVisible = isSlideVisible;
-
 var getNextMoveIndex = function getNextMoveIndex(scrollMode, wrapAround, currentSlide, slideCount, slidesToScroll, slidesToShow, cellAlign) {
@@ -40,0 +15,0 @@ if (wrapAround) {

es/utils.test.js

@@ -7,41 +7,42 @@ "use strict";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-describe('isSlideVisible', function () {
-  it.each(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    currentSlide | indexToCheck | slidesToShow | expected\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n  "])), 1, 0, 2, false, 1, 1, 2, true, 1, 2, 2, true, 1, 3, 2, false, 1, 0, 1.5, false, 1, 1, 1.5, true, 1, 2, 1.5, true, 1, 3, 1.5, false, 1.5, 0, 2, false, 1.5, 1, 2, true, 1.5, 2, 2, true, 1.5, 3, 2, true, 1.5, 4, 2, false, 1, 0, 1, false, 1, 1, 1, true, 1, 2, 1, false, 1.5, 0, 1, false, 1.5, 1, 1, true, 1.5, 2, 1, true, 1.5, 3, 1, false)('works with left align ' + '(showing index $currentSlide, check index $indexToCheck, $slidesToShow slidesToShow)', function (_ref) {
+describe('getNextMoveIndex', function () {
+  it.each(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    currentSlide | slideCount | slidesToScroll | expected\n    ", "         | ", "       | ", "           | ", "\n    ", "         | ", "       | ", "           | ", "\n    ", "        | ", "       | ", "           | ", "\n    ", "         | ", "       | ", "           | ", "\n    ", "         | ", "       | ", "           | ", "\n  "])), 1, 3, 2, 3, 1, 2, 2, 3, -1, 2, 1, 0, 1, 1, 1, 2, 1, 2, 1, 2)('does basic calculation with wrapAround=true ' + '(currentSlide $currentSlide, slideCount $slideCount, slidesToScroll $slidesToScroll)', function (_ref) {
     var currentSlide = _ref.currentSlide,
-        indexToCheck = _ref.indexToCheck,
-        slidesToShow = _ref.slidesToShow,
+        slideCount = _ref.slideCount,
+        slidesToScroll = _ref.slidesToScroll,
         expected = _ref.expected;
-    expect((0, _utils.isSlideVisible)(currentSlide, indexToCheck, slidesToShow, 'left')).toEqual(expected);
+    var args = [_types.ScrollMode.page, true, currentSlide, slideCount, slidesToScroll, 1];
+    expect(_utils.getNextMoveIndex.apply(void 0, args.concat(['left']))).toEqual(expected);
+    expect(_utils.getNextMoveIndex.apply(void 0, args.concat(['right']))).toEqual(expected);
+    expect(_utils.getNextMoveIndex.apply(void 0, args.concat(['center']))).toEqual(expected);
   });
-  it.each(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    currentSlide | indexToCheck | slidesToShow | expected\n    ", "         | ", "        | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "        | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "       | ", "        | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n  "])), 1, -1, 2, false, 1, 0, 2, true, 1, 1, 2, true, 1, 2, 2, false, 1, -1, 1.5, false, 1, 0, 1.5, true, 1, 1, 1.5, true, 1, 2, 1.5, false, 1.5, -1, 2, false, 1.5, 0, 2, true, 1.5, 1, 2, true, 1.5, 2, 2, true, 1.5, 3, 2, false, 1, 0, 1, false, 1, 1, 1, true, 1, 2, 1, false, 1.5, 0, 1, false, 1.5, 1, 1, true, 1.5, 2, 1, true, 1.5, 3, 1, false)('works with right align ' + '(showing index $currentSlide, check index $indexToCheck, $slidesToShow slidesToShow)', function (_ref2) {
+  it.each(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "       | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "       | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "       | ", "           | ", " | ", "\n  "])), 2, 1, 1, 'left', 2, 1, 1, 1, 'left', 2, 1.5, 1, 1, 'left', 2, 1.5, 2, 1, 'left', 1.5, 2, 2, 1, 'left', 2, 1, 2, 1, 'left', 1, 1, 2, 2, 'left', 1, 1, 2, 1.5, 'left', 1, 0, 1, 1, 'left', 1, 0.5, 1, 1, 'left', 1.5, 0, 2, 1, 'left', 1, 0, 2, 2, 'left', 2, 0, 2, 1.5, 'left', 1.5, 0, 1.5, 2, 'left', 2, 2, 1, 1, 'right', 2, 1, 1, 1, 'right', 2, 1.5, 1, 1, 'right', 2, 1, 2, 1, 'right', 2, 1, 2, 2, 'right', 2, 1, 2, 1.5, 'right', 2, 0, 1, 1, 'right', 1, 0.5, 1, 1, 'right', 1.5, 0, 2, 1, 'right', 1, 0, 2, 2, 'right', 2, 0, 2, 1.5, 'right', 1.5, 0, 1.5, 2, 'right', 2, 2, 1, 1, 'center', 2, 1, 1, 1, 'center', 2, 1.5, 1, 1, 'center', 2, 1, 2, 1, 'center', 2, 1, 2, 2, 'center', 2, 1, 2, 1.5, 'center', 2, 0, 1, 1, 'center', 1, 0.5, 1, 1, 'center', 1.5, 0, 2, 1, 'center', 1, 0, 2, 2, 'center', 2, 0, 2, 1.5, 'center', 1.5, 0, 1.5, 2, 'center', 2)('gets correct index when allowing whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref2) {
     var currentSlide = _ref2.currentSlide,
-        indexToCheck = _ref2.indexToCheck,
         slidesToShow = _ref2.slidesToShow,
+        slidesToScroll = _ref2.slidesToScroll,
+        cellAlign = _ref2.cellAlign,
         expected = _ref2.expected;
-    expect((0, _utils.isSlideVisible)(currentSlide, indexToCheck, slidesToShow, 'right')).toEqual(expected);
+    expect((0, _utils.getNextMoveIndex)(_types.ScrollMode.page, false, currentSlide, 3, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
   });
-  it.each(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    currentSlide | indexToCheck | slidesToShow | expected\n    ", "         | ", "        | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "        | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "         | ", "       | ", "\n    ", "         | ", "        | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "       | ", "        | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "         | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n    ", "       | ", "         | ", "         | ", "\n  "])), 1, -1, 3, false, 1, 0, 3, true, 1, 1, 3, true, 1, 2, 3, true, 1, 3, 3, false, 1, -1, 2.5, false, 1, 0, 2.5, true, 1, 1, 2.5, true, 1, 2, 2.5, true, 1, 3, 2.5, false, 1, -1, 2, false, 1, 0, 2, true, 1, 1, 2, true, 1, 2, 2, true, 1, 3, 2, false, 1.2, -1, 2, false, 1.2, 0, 2, true, 1.2, 1, 2, true, 1.2, 2, 2, true, 1.2, 3, 2, false, 1.7, 0, 2, false, 1.7, 1, 2, true, 1.7, 2, 2, true, 1.7, 3, 2, true, 1.7, 4, 2, false, 1, 0, 1, false, 1, 1, 1, true, 1, 2, 1, false, 1.5, 0, 1, false, 1.5, 1, 1, true, 1.5, 2, 1, true, 1.5, 3, 1, false)('works with center align ' + '(showing index $currentSlide, check index $indexToCheck, $slidesToShow slidesToShow)', function (_ref3) {
+  it.each(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "          | ", "   | ", "\n    ", "         | ", "       | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n  "])), 2, 1, 1, 'left', 2, 1, 1, 1, 'left', 2, 1.5, 1, 1, 'left', 2, 1, 2, 1, 'left', 1, 1, 2, 2, 'left', 1, 1, 2, 1.5, 'left', 1, 0, 1, 1, 'left', 1, 0.5, 1, 1, 'left', 1.5, 0, 2, 1, 'left', 1, 0, 2, 2, 'left', 1, 0, 2, 1.5, 'left', 1, 3, 1, 11, 'left', 3, 0, 1.5, 2, 'left', 1.5, 1, 2, 1, 'center', 2, 1, 2, 1, 'right', 2)('gets correct index when avoiding whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref3) {
     var currentSlide = _ref3.currentSlide,
-        indexToCheck = _ref3.indexToCheck,
         slidesToShow = _ref3.slidesToShow,
+        slidesToScroll = _ref3.slidesToScroll,
+        cellAlign = _ref3.cellAlign,
         expected = _ref3.expected;
-    expect((0, _utils.isSlideVisible)(currentSlide, indexToCheck, slidesToShow, 'center')).toEqual(expected);
+    expect((0, _utils.getNextMoveIndex)(_types.ScrollMode.remainder, false, currentSlide, 3, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
   });
 });
-describe('getNextMoveIndex', function () {
-  it.each(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    currentSlide | slideCount | slidesToScroll | expected\n    ", "         | ", "       | ", "           | ", "\n    ", "         | ", "       | ", "           | ", "\n    ", "        | ", "       | ", "           | ", "\n    ", "         | ", "       | ", "           | ", "\n    ", "         | ", "       | ", "           | ", "\n  "])), 1, 3, 2, 3, 1, 2, 2, 3, -1, 2, 1, 0, 1, 1, 1, 2, 1, 2, 1, 2)('does basic calculation with wrapAround=true ' + '(currentSlide $currentSlide, slideCount $slideCount, slidesToScroll $slidesToScroll)', function (_ref4) {
+describe('getPrevMoveIndex', function () {
+  it.each(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    currentSlide | slidesToScroll | expected\n    ", "         | ", "           | ", "\n    ", "         | ", "           | ", "\n    ", "        | ", "           | ", "\n  "])), 1, 2, -1, 4, 2, 2, -1, 1, -2)('does basic calculation with wrapAround=true ' + '(currentSlide $currentSlide, slidesToScroll $slidesToScroll)', function (_ref4) {
     var currentSlide = _ref4.currentSlide,
-        slideCount = _ref4.slideCount,
         slidesToScroll = _ref4.slidesToScroll,
         expected = _ref4.expected;
-    var args = [_types.ScrollMode.page, true, currentSlide, slideCount, slidesToScroll, 1];
-    expect(_utils.getNextMoveIndex.apply(void 0, args.concat(['left']))).toEqual(expected);
-    expect(_utils.getNextMoveIndex.apply(void 0, args.concat(['right']))).toEqual(expected);
-    expect(_utils.getNextMoveIndex.apply(void 0, args.concat(['center']))).toEqual(expected);
+    expect((0, _utils.getPrevMoveIndex)(_types.ScrollMode.page, true, currentSlide, slidesToScroll, 1, 'left')).toEqual(expected);
   });
-  it.each(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "       | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "       | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "       | ", "           | ", " | ", "\n  "])), 2, 1, 1, 'left', 2, 1, 1, 1, 'left', 2, 1.5, 1, 1, 'left', 2, 1.5, 2, 1, 'left', 1.5, 2, 2, 1, 'left', 2, 1, 2, 1, 'left', 1, 1, 2, 2, 'left', 1, 1, 2, 1.5, 'left', 1, 0, 1, 1, 'left', 1, 0.5, 1, 1, 'left', 1.5, 0, 2, 1, 'left', 1, 0, 2, 2, 'left', 2, 0, 2, 1.5, 'left', 1.5, 0, 1.5, 2, 'left', 2, 2, 1, 1, 'right', 2, 1, 1, 1, 'right', 2, 1.5, 1, 1, 'right', 2, 1, 2, 1, 'right', 2, 1, 2, 2, 'right', 2, 1, 2, 1.5, 'right', 2, 0, 1, 1, 'right', 1, 0.5, 1, 1, 'right', 1.5, 0, 2, 1, 'right', 1, 0, 2, 2, 'right', 2, 0, 2, 1.5, 'right', 1.5, 0, 1.5, 2, 'right', 2, 2, 1, 1, 'center', 2, 1, 1, 1, 'center', 2, 1.5, 1, 1, 'center', 2, 1, 2, 1, 'center', 2, 1, 2, 2, 'center', 2, 1, 2, 1.5, 'center', 2, 0, 1, 1, 'center', 1, 0.5, 1, 1, 'center', 1.5, 0, 2, 1, 'center', 1, 0, 2, 2, 'center', 2, 0, 2, 1.5, 'center', 1.5, 0, 1.5, 2, 'center', 2)('gets correct index when allowing whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref5) {
+  it.each(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "       | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "       | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "       | ", "           | ", " | ", "\n  "])), 0, 1, 1, 'left', 0, 1, 1, 1, 'left', 0, 1.5, 1, 1, 'left', 0.5, 1.5, 2, 1, 'left', 0.5, 1, 2, 1, 'left', 0, 1, 2, 2, 'left', 0, 1, 2, 1.5, 'left', 0, 2, 2, 1.5, 'left', 0.5, 2, 2, 2, 'left', 0, 2, 1.5, 2, 'left', 0, 0, 1, 1, 'right', 0, 1, 1, 1, 'right', 0, 1.5, 1, 1, 'right', 0.5, 1.5, 2, 1, 'right', 0.5, 1, 2, 1, 'right', 1, 1, 2, 2, 'right', 1, 1, 2, 1.5, 'right', 1, 2, 2, 1.5, 'right', 0.5, 2, 2, 2, 'right', 0, 2, 1.5, 2, 'right', 0, 0, 1, 1, 'center', 0, 1, 1, 1, 'center', 0, 1.5, 1, 1, 'center', 0.5, 1.5, 2, 1, 'center', 0.5, 1, 2, 1, 'center', 0, 1, 2, 2, 'center', 0, 1, 2, 1.5, 'center', 0, 2, 2, 1.5, 'center', 0.5, 2, 2, 2, 'center', 0, 2, 1.5, 2, 'center', 0)('gets correct index when allowing whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref5) {
     var currentSlide = _ref5.currentSlide,
@@ -52,5 +53,5 @@ slidesToShow = _ref5.slidesToShow,
         expected = _ref5.expected;
-    expect((0, _utils.getNextMoveIndex)(_types.ScrollMode.page, false, currentSlide, 3, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
+    expect((0, _utils.getPrevMoveIndex)(_types.ScrollMode.page, false, currentSlide, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
   });
-  it.each(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "          | ", "   | ", "\n    ", "         | ", "       | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n  "])), 2, 1, 1, 'left', 2, 1, 1, 1, 'left', 2, 1.5, 1, 1, 'left', 2, 1, 2, 1, 'left', 1, 1, 2, 2, 'left', 1, 1, 2, 1.5, 'left', 1, 0, 1, 1, 'left', 1, 0.5, 1, 1, 'left', 1.5, 0, 2, 1, 'left', 1, 0, 2, 2, 'left', 1, 0, 2, 1.5, 'left', 1, 3, 1, 11, 'left', 3, 0, 1.5, 2, 'left', 1.5, 1, 2, 1, 'center', 2, 1, 2, 1, 'right', 2)('gets correct index when avoiding whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref6) {
+  it.each(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "       | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n  "])), 0, 1, 1, 'right', 0, 1, 1, 1, 'right', 0, 1.5, 1, 1, 'right', 0.5, 1.5, 2, 1, 'right', 1, 1, 2, 1, 'right', 1, 1, 2, 2, 'right', 1, 1, 2, 1.5, 'right', 1, 2, 2, 1.5, 'right', 1, 2, 2, 2, 'right', 1, 2, 1.5, 2, 'right', 0.5, 1, 2, 1, 'center', 0, 1, 2, 1, 'left', 0)('gets correct index when avoiding whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref6) {
     var currentSlide = _ref6.currentSlide,
@@ -61,26 +62,2 @@ slidesToShow = _ref6.slidesToShow,
         expected = _ref6.expected;
-    expect((0, _utils.getNextMoveIndex)(_types.ScrollMode.remainder, false, currentSlide, 3, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
-  });
-});
-describe('getPrevMoveIndex', function () {
-  it.each(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    currentSlide | slidesToScroll | expected\n    ", "         | ", "           | ", "\n    ", "         | ", "           | ", "\n    ", "        | ", "           | ", "\n  "])), 1, 2, -1, 4, 2, 2, -1, 1, -2)('does basic calculation with wrapAround=true ' + '(currentSlide $currentSlide, slidesToScroll $slidesToScroll)', function (_ref7) {
-    var currentSlide = _ref7.currentSlide,
-        slidesToScroll = _ref7.slidesToScroll,
-        expected = _ref7.expected;
-    expect((0, _utils.getPrevMoveIndex)(_types.ScrollMode.page, true, currentSlide, slidesToScroll, 1, 'left')).toEqual(expected);
-  });
-  it.each(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "       | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "         | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n    ", "         | ", "       | ", "           | ", "   | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "       | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "       | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "         | ", "         | ", " | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "       | ", "           | ", " | ", "\n  "])), 0, 1, 1, 'left', 0, 1, 1, 1, 'left', 0, 1.5, 1, 1, 'left', 0.5, 1.5, 2, 1, 'left', 0.5, 1, 2, 1, 'left', 0, 1, 2, 2, 'left', 0, 1, 2, 1.5, 'left', 0, 2, 2, 1.5, 'left', 0.5, 2, 2, 2, 'left', 0, 2, 1.5, 2, 'left', 0, 0, 1, 1, 'right', 0, 1, 1, 1, 'right', 0, 1.5, 1, 1, 'right', 0.5, 1.5, 2, 1, 'right', 0.5, 1, 2, 1, 'right', 1, 1, 2, 2, 'right', 1, 1, 2, 1.5, 'right', 1, 2, 2, 1.5, 'right', 0.5, 2, 2, 2, 'right', 0, 2, 1.5, 2, 'right', 0, 0, 1, 1, 'center', 0, 1, 1, 1, 'center', 0, 1.5, 1, 1, 'center', 0.5, 1.5, 2, 1, 'center', 0.5, 1, 2, 1, 'center', 0, 1, 2, 2, 'center', 0, 1, 2, 1.5, 'center', 0, 2, 2, 1.5, 'center', 0.5, 2, 2, 2, 'center', 0, 2, 1.5, 2, 'center', 0)('gets correct index when allowing whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref8) {
-    var currentSlide = _ref8.currentSlide,
-        slidesToShow = _ref8.slidesToShow,
-        slidesToScroll = _ref8.slidesToScroll,
-        cellAlign = _ref8.cellAlign,
-        expected = _ref8.expected;
-    expect((0, _utils.getPrevMoveIndex)(_types.ScrollMode.page, false, currentSlide, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
-  });
-  it.each(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    currentSlide | slidesToShow | slidesToScroll | cellAlign   | expected\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "       | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "         | ", "  | ", "\n    ", "         | ", "         | ", "           | ", "  | ", "\n    ", "         | ", "       | ", "           | ", "  | ", "\n    ", "         | ", "         | ", "           | ", " | ", "\n    ", "         | ", "         | ", "           | ", "   | ", "\n  "])), 0, 1, 1, 'right', 0, 1, 1, 1, 'right', 0, 1.5, 1, 1, 'right', 0.5, 1.5, 2, 1, 'right', 1, 1, 2, 1, 'right', 1, 1, 2, 2, 'right', 1, 1, 2, 1.5, 'right', 1, 2, 2, 1.5, 'right', 1, 2, 2, 2, 'right', 1, 2, 1.5, 2, 'right', 0.5, 1, 2, 1, 'center', 0, 1, 2, 1, 'left', 0)('gets correct index when avoiding whitespace ' + '(slideIndex $currentSlide, $slidesToShow slidesToShow, $slidesToScroll slidesToScroll, $cellAlign align)', function (_ref9) {
-    var currentSlide = _ref9.currentSlide,
-        slidesToShow = _ref9.slidesToShow,
-        slidesToScroll = _ref9.slidesToScroll,
-        cellAlign = _ref9.cellAlign,
-        expected = _ref9.expected;
     expect((0, _utils.getPrevMoveIndex)(_types.ScrollMode.remainder, false, currentSlide, slidesToScroll, slidesToShow, cellAlign)).toEqual(expected);
@@ -90,8 +67,8 @@ });
 describe('getBoundedIndex', function () {
-  it.each(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    rawIndex | slideCount | expected\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "  | ", "       | ", "\n  "])), 0, 1, 0, 1, 2, 1, 2, 2, 0, 3, 2, 1, 4, 2, 0, -1, 2, 1, -2, 2, 0, -2, 3, 1, -3, 3, 0, -6, 3, 0, -7, 3, 2, -7.5, 3, 1.5)('gets the right index when bounds applied ' + '(rawIndex $rawIndex, slideCount $slideCount)', function (_ref10) {
-    var rawIndex = _ref10.rawIndex,
-        slideCount = _ref10.slideCount,
-        expected = _ref10.expected;
+  it.each(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    rawIndex | slideCount | expected\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "     | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "    | ", "       | ", "\n    ", "  | ", "       | ", "\n  "])), 0, 1, 0, 1, 2, 1, 2, 2, 0, 3, 2, 1, 4, 2, 0, -1, 2, 1, -2, 2, 0, -2, 3, 1, -3, 3, 0, -6, 3, 0, -7, 3, 2, -7.5, 3, 1.5)('gets the right index when bounds applied ' + '(rawIndex $rawIndex, slideCount $slideCount)', function (_ref7) {
+    var rawIndex = _ref7.rawIndex,
+        slideCount = _ref7.slideCount,
+        expected = _ref7.expected;
     expect((0, _utils.getBoundedIndex)(rawIndex, slideCount)).toEqual(expected);
   });
 });

lib/carousel.js

@@ -35,2 +35,3 @@ "use strict";
 const slider_list_1 = require("./slider-list");
+const types_1 = require("./types");
 const controls_1 = __importDefault(require("./controls"));
@@ -52,6 +53,16 @@ const default_carousel_props_1 = __importDefault(require("./default-carousel-props"));
     const props = rawProps;
-    const { adaptiveHeight, adaptiveHeightAnimation, afterSlide, animation, autoplay, autoplayInterval, autoplayReverse, beforeSlide, cellAlign, cellSpacing, children, className, disableAnimation, dragging: desktopDraggingEnabled, dragThreshold: propsDragThreshold, enableKeyboardControls, frameAriaLabel, innerRef, keyCodeConfig, onDrag, onDragEnd, onDragStart, onUserNavigation, pauseOnHover, renderAnnounceSlideMessage, scrollMode, slideIndex, slidesToScroll: propsSlidesToScroll, slidesToShow, speed, style, swiping: mobileDraggingEnabled, wrapAround, zoomScale, } = props;
+    const { adaptiveHeight, adaptiveHeightAnimation, afterSlide, animation, autoplay, autoplayInterval, autoplayReverse, beforeSlide, cellAlign: propsCellAlign, cellSpacing, children, className, disableAnimation, dragging: desktopDraggingEnabled, dragThreshold: propsDragThreshold, enableKeyboardControls, frameAriaLabel, innerRef, keyCodeConfig, onDrag, onDragEnd, onDragStart, onUserNavigation, pauseOnHover, renderAnnounceSlideMessage, scrollMode: propsScrollMode, slideIndex, slidesToScroll: propsSlidesToScroll, slidesToShow: propsSlidesToShow, slideWidth, speed, style, swiping: mobileDraggingEnabled, wrapAround, zoomScale, } = props;
     const filteredSlides = react_1.default.Children.toArray(children).filter(Boolean);
     const slideCount = filteredSlides.length;
-    const slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll;
+    const cellAlign = slideWidth || propsSlidesToScroll === 'auto' ? 'left' : propsCellAlign;
+    const scrollMode = propsSlidesToScroll === 'auto' ? types_1.ScrollMode.remainder : propsScrollMode;
+    const [slideIOEntries, setSlideIOEntries] = (0, react_1.useState)(new Map());
+    const visibleCount = Array.from(slideIOEntries).filter(([, visible]) => visible).length;
+    const [constantVisibleCount, setConstantVisibleCount] = (0, react_1.useState)(visibleCount);
+    const slidesToShow = slideWidth ? constantVisibleCount : propsSlidesToShow;
+    const slidesToScroll = animation === 'fade'
+        ? slidesToShow
+        : propsSlidesToScroll === 'auto'
+            ? Math.max(constantVisibleCount, 1)
+            : propsSlidesToScroll;
     const [currentSlide, setCurrentSlide] = (0, react_1.useState)(() => (0, utils_1.getDefaultSlideIndex)(slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode));
@@ -62,2 +73,23 @@ const [pause, setPause] = (0, react_1.useState)(false);
     const [animationDistance, setAnimationDistance] = (0, react_1.useState)(0);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const updateSlideIOEntry = (0, react_1.useCallback)((id, isFullyVisible) => {
+        if (!!slideIOEntries.get(id) === isFullyVisible)
+            return;
+        setSlideIOEntries((prev) => {
+            const newMap = new Map(prev);
+            newMap.set(id, isFullyVisible);
+            return newMap;
+        });
+    }, [slideIOEntries]);
+    const prevDragged = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isDragging)
+            prevDragged.current = true;
+        if (!(isDragging || isAnimating)) {
+            // Wait for the animation to complete after dragging
+            if (!prevDragged.current)
+                setConstantVisibleCount(visibleCount);
+            prevDragged.current = false;
+        }
+    }, [isAnimating, isDragging, visibleCount]);
     const prevXPosition = (0, react_1.useRef)(null);
@@ -404,3 +436,3 @@ const preDragOffset = (0, react_1.useRef)(0);
         const slides = filteredSlides.map((child, index) => {
-            return ((0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ count: slideCount, currentSlide: currentSlide, index: index, isCurrentSlide: currentSlide === index, typeOfSlide: typeOfSlide, wrapAround: wrapAround, cellSpacing: cellSpacing, animation: animation, slidesToShow: slidesToShow, speed: speed, zoomScale: zoomScale, cellAlign: cellAlign, onVisibleSlideHeightChange: handleVisibleSlideHeightChange, adaptiveHeight: adaptiveHeight, initializedAdaptiveHeight: initializedAdaptiveHeight }, { children: child }), `${typeOfSlide}-${index}`));
+            return ((0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ id: `${typeOfSlide}-${index}`, count: slideCount, index: index, isCurrentSlide: currentSlide === index, typeOfSlide: typeOfSlide, wrapAround: wrapAround, cellSpacing: cellSpacing, animation: animation, speed: speed, zoomScale: zoomScale, onVisibleSlideHeightChange: handleVisibleSlideHeightChange, slideWidth: slideWidth, updateIOEntry: updateSlideIOEntry, adaptiveHeight: adaptiveHeight, initializedAdaptiveHeight: initializedAdaptiveHeight, carouselRef: carouselRef }, { children: child }), `${typeOfSlide}-${index}`));
         });
@@ -414,5 +446,5 @@ return slides;
                     count: slideCount,
-                }) }), (0, controls_1.default)(props, slideCount, currentSlide, goToSlide, nextSlide, prevSlide, slidesToScroll), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: ['slider-frame', className || ''].join(' ').trim(), style: Object.assign({ overflow: 'hidden', width: '100%', position: 'relative', outline: 'none', height: frameHeight, transition: adaptiveHeightAnimation
+                }) }), (0, controls_1.default)(props, slideCount, currentSlide, goToSlide, nextSlide, prevSlide, slidesToScroll), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: ['slider-frame', className || ''].join(' ').trim(), style: Object.assign({ overflow: 'hidden', width: '100%', position: 'relative', outline: 'none', touchAction: 'pan-y', height: frameHeight, transition: adaptiveHeightAnimation
                         ? 'height 300ms ease-in-out'
-                        : undefined, willChange: 'height', userSelect: 'none' }, style), "aria-label": frameAriaLabel, role: "region", tabIndex: enableKeyboardControls ? 0 : -1, onKeyDown: enableKeyboardControls ? onKeyDown : undefined, ref: carouselRef, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseLeave: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: handleDragEnd, onTouchMove: onTouchMove }, { children: (0, jsx_runtime_1.jsxs)(slider_list_1.SliderList, Object.assign({ animationDistance: animationDistance, cellAlign: cellAlign, currentSlide: currentSlide, disableEdgeSwiping: props.disableEdgeSwiping, draggedOffset: preDragOffset.current - dragDistance, disableAnimation: disableAnimation, easing: props.easing, edgeEasing: props.edgeEasing, isDragging: isDragging, ref: setSliderListRef, scrollMode: scrollMode, animation: animation, slideCount: slideCount, slidesToScroll: slidesToScroll, slidesToShow: slidesToShow, speed: speed, wrapAround: wrapAround }, { children: [wrapAround ? renderSlides('prev-cloned') : null, renderSlides(), wrapAround ? renderSlides('next-cloned') : null] })) }))] })));
+                        : undefined, willChange: 'height', userSelect: 'none' }, style), "aria-label": frameAriaLabel, role: "region", tabIndex: enableKeyboardControls ? 0 : -1, onKeyDown: enableKeyboardControls ? onKeyDown : undefined, ref: carouselRef, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseLeave: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: handleDragEnd, onTouchMove: onTouchMove }, { children: (0, jsx_runtime_1.jsxs)(slider_list_1.SliderList, Object.assign({ animationDistance: animationDistance, cellAlign: cellAlign, currentSlide: currentSlide, disableEdgeSwiping: props.disableEdgeSwiping, draggedOffset: preDragOffset.current - dragDistance, disableAnimation: disableAnimation, easing: props.easing, edgeEasing: props.edgeEasing, isDragging: isDragging, ref: setSliderListRef, scrollMode: scrollMode, animation: animation, slideCount: slideCount, slidesToScroll: slidesToScroll, slidesToShow: slidesToShow, speed: speed, slideWidth: slideWidth, wrapAround: wrapAround, setIsAnimating: setIsAnimating }, { children: [wrapAround ? renderSlides('prev-cloned') : null, renderSlides(), wrapAround ? renderSlides('next-cloned') : null] })) }))] })));
 };
@@ -419,0 +451,0 @@ exports.Carousel = Carousel;

lib/slide.d.ts

@@ -1,7 +0,6 @@
-import { ReactNode } from 'react';
-import { CellAlign } from './types';
-declare const Slide: ({ count, children, currentSlide, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, animation, speed, slidesToShow, zoomScale, cellAlign, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight, }: {
+import { CSSProperties, ReactNode, RefObject } from 'react';
+declare const Slide: ({ count, children, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, slideWidth, animation, speed, zoomScale, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight, updateIOEntry, id, carouselRef, }: {
     count: number;
+    id: string;
     children: ReactNode | ReactNode[];
-    currentSlide: number;
     index: number;
@@ -14,5 +13,6 @@ isCurrentSlide: boolean;
     speed: number;
-    slidesToShow: number;
     zoomScale: number | undefined;
-    cellAlign: CellAlign;
+    slideWidth?: CSSProperties['width'];
+    updateIOEntry: (id: string, isFullyVisible: boolean) => void;
+    carouselRef: RefObject<Element>;
     /**
@@ -19,0 +19,0 @@ * Called with `height` when slide becomes visible and `null` when it becomes

lib/slide.js

@@ -5,6 +5,7 @@ "use strict";
 const react_1 = require("react");
-const utils_1 = require("./utils");
+const use_slide_intersection_observer_1 = require("./hooks/use-slide-intersection-observer");
 const getSlideWidth = (count, wrapAround) => `${wrapAround ? 100 / (3 * count) : 100 / count}%`;
-const getSlideStyles = (count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight) => {
-    const width = getSlideWidth(count, wrapAround);
+const getSlideStyles = (count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight, slideWidth) => {
+    const width = slideWidth !== null && slideWidth !== void 0 ? slideWidth : getSlideWidth(count, wrapAround);
+    // const width = getSlideWidth(count, wrapAround);
     const visibleSlideOpacity = isVisibleSlide ? 1 : 0;
@@ -33,3 +34,2 @@ const animationSpeed = animation === 'fade' ? 200 : 500;
         width,
-        flex: 1,
         height,
@@ -53,8 +53,13 @@ padding: `0 ${cellSpacing ? cellSpacing / 2 : 0}px`,
 };
-const Slide = ({ count, children, currentSlide, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, animation, speed, slidesToShow, zoomScale, cellAlign, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight, }) => {
+const Slide = ({ count, children, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, slideWidth, animation, speed, zoomScale, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight, updateIOEntry, id, carouselRef, }) => {
+    var _a;
     const customIndex = wrapAround
         ? generateIndex(index, count, typeOfSlide)
         : index;
-    const isVisible = (0, utils_1.isSlideVisible)(currentSlide, customIndex, slidesToShow, cellAlign);
     const slideRef = (0, react_1.useRef)(null);
+    const entry = (0, use_slide_intersection_observer_1.useSlideIntersectionObserver)(slideRef, carouselRef, (entry) => {
+        updateIOEntry(id, (entry === null || entry === void 0 ? void 0 : entry.intersectionRatio) >= 0.95);
+    });
+    const isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    const isFullyVisible = ((_a = entry === null || entry === void 0 ? void 0 : entry.intersectionRatio) !== null && _a !== void 0 ? _a : 1) >= 0.95;
     const prevIsVisibleRef = (0, react_1.useRef)(false);
@@ -66,8 +71,2 @@ (0, react_1.useEffect)(() => {
             const slideHeight = (_a = node.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height;
-            if (isVisible) {
-                node.removeAttribute('inert');
-            }
-            else {
-                node.setAttribute('inert', 'true');
-            }
             const prevIsVisible = prevIsVisibleRef.current;
@@ -82,13 +81,7 @@ if (isVisible && !prevIsVisible) {
         }
-    }, [
-        adaptiveHeight,
-        customIndex,
-        isVisible,
-        onVisibleSlideHeightChange,
-        slidesToShow,
-    ]);
-    const currentSlideClass = isCurrentSlide && isVisible ? ' slide-current' : '';
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: slideRef, className: `slide${currentSlideClass}${typeOfSlide ? ` ${typeOfSlide}` : ''}${isVisible ? ' slide-visible' : ''}`, style: getSlideStyles(count, isCurrentSlide, isVisible, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight) }, { children: children })));
+    }, [customIndex, isVisible, onVisibleSlideHeightChange]);
+    const currentSlideClass = isCurrentSlide && isFullyVisible ? ' slide-current' : '';
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: slideRef }, { inert: (!isFullyVisible).toString() }, { className: `slide${currentSlideClass}${typeOfSlide ? ` ${typeOfSlide}` : ''}${isFullyVisible ? ' slide-visible' : ''}`, style: getSlideStyles(count, isCurrentSlide, isFullyVisible, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight, slideWidth) }, { children: children })));
 };
 exports.default = Slide;
 //# sourceMappingURL=slide.js.map

lib/slider-list.d.ts

 import React, { ReactNode } from 'react';
 import { CellAlign, InternalCarouselProps } from './types';
 export declare const getPercentOffsetForSlide: (currentSlide: number, slideCount: number, slidesToShow: number, cellAlign: CellAlign, wrapAround: boolean) => number;
-interface SliderListProps extends Pick<InternalCarouselProps, 'cellAlign' | 'disableAnimation' | 'disableEdgeSwiping' | 'easing' | 'edgeEasing' | 'scrollMode' | 'animation' | 'slidesToScroll' | 'slidesToShow' | 'speed' | 'wrapAround'> {
+interface SliderListProps extends Pick<InternalCarouselProps, 'cellAlign' | 'disableAnimation' | 'disableEdgeSwiping' | 'easing' | 'edgeEasing' | 'scrollMode' | 'animation' | 'slidesToShow' | 'slideWidth' | 'speed' | 'wrapAround'> {
+    slidesToScroll: number;
     animationDistance: number;
@@ -11,2 +12,3 @@ children: ReactNode;
     slideCount: number;
+    setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -13,0 +15,0 @@ export declare const SliderList: React.ForwardRefExoticComponent<SliderListProps & React.RefAttributes<HTMLDivElement>>;

lib/slider-list.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
@@ -8,3 +28,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const default_controls_1 = require("./default-controls");
@@ -33,6 +53,8 @@ const use_tween_1 = require("./hooks/use-tween");
 exports.getPercentOffsetForSlide = getPercentOffsetForSlide;
-exports.SliderList = react_1.default.forwardRef(({ animation, animationDistance, cellAlign, children, currentSlide, disableAnimation, disableEdgeSwiping, draggedOffset, easing, edgeEasing, isDragging, scrollMode, slideCount, slidesToScroll, slidesToShow, speed, wrapAround, }, forwardedRef) => {
+exports.SliderList = react_1.default.forwardRef(({ animation, animationDistance, cellAlign, children, currentSlide, disableAnimation, disableEdgeSwiping, draggedOffset, easing, edgeEasing, isDragging, scrollMode, slideCount, slidesToScroll, slidesToShow, speed, wrapAround, slideWidth, setIsAnimating, }, forwardedRef) => {
     // When wrapAround is enabled, we show the slides 3 times
     const renderedSlideCount = wrapAround ? 3 * slideCount : slideCount;
-    const listVisibleWidth = `${(renderedSlideCount * 100) / slidesToShow}%`;
+    const listVisibleWidth = slideWidth
+        ? `calc(${slideWidth} * ${renderedSlideCount})`
+        : `${(renderedSlideCount * 100) / slidesToShow}%`;
     const percentOffsetForSlideProps = [
@@ -84,2 +106,5 @@ slideCount,
     }
+    (0, react_1.useEffect)(() => {
+        setIsAnimating(isAnimating);
+    }, [isAnimating, setIsAnimating]);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: forwardedRef, className: "slider-list", style: {
@@ -86,0 +111,0 @@ width: listVisibleWidth,

lib/types.d.ts

@@ -302,3 +302,3 @@ import { ReactNode, CSSProperties, MutableRefObject } from 'react';
      */
-    slidesToScroll: number;
+    slidesToScroll: number | 'auto';
     /**
@@ -309,2 +309,6 @@ * Slides to show at once
     /**
+     * Sets a fixed slide width
+     */
+    slideWidth?: CSSProperties['width'];
+    /**
      * Animation duration
@@ -311,0 +315,0 @@ */

lib/utils.d.ts

 import { CellAlign, ScrollMode } from './types';
-export declare const isSlideVisible: (currentSlide: number, indexToCheck: number, slidesToShow: number, cellAlign: CellAlign) => boolean;
 export declare const getNextMoveIndex: (scrollMode: ScrollMode, wrapAround: boolean, currentSlide: number, slideCount: number, slidesToScroll: number, slidesToShow: number, cellAlign: CellAlign) => number;
@@ -4,0 +3,0 @@ export declare const getPrevMoveIndex: (scrollMode: ScrollMode, wrapAround: boolean, currentSlide: number, slidesToScroll: number, slidesToShow: number, cellAlign: CellAlign) => number;

lib/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBoundedIndex = exports.getDefaultSlideIndex = exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.isSlideVisible = void 0;
+exports.getBoundedIndex = exports.getDefaultSlideIndex = exports.getPrevMoveIndex = exports.getNextMoveIndex = void 0;
 const default_controls_1 = require("./default-controls");
 const types_1 = require("./types");
-const isSlideVisible = (currentSlide, indexToCheck, slidesToShow, cellAlign) => {
-    // The addition or subtraction of constants (1 , 0.5) in the following
-    // calculations are accounting for the fact that a slide will be visible even
-    // after the position associated with its index is off-screen. For example,
-    // with cellAlign="left", slidesToShow=1 and indexToCheck=0,
-    // if the currentSlide is set to 0.99, both (a sliver of) slide 0 and slide 1
-    // will be visible at the same time, even though the position we associate
-    // with index 0, its leftmost edge, is off-screen.
-    if (cellAlign === 'left') {
-        return (indexToCheck < currentSlide + slidesToShow &&
-            indexToCheck > currentSlide - 1);
-    }
-    if (cellAlign === 'center') {
-        return ((indexToCheck > currentSlide - slidesToShow / 2 - 0.5 &&
-            indexToCheck <= currentSlide) ||
-            (indexToCheck > currentSlide &&
-                indexToCheck < currentSlide + slidesToShow / 2 + 0.5));
-    }
-    if (cellAlign === 'right') {
-        return (indexToCheck < currentSlide + 1 &&
-            indexToCheck > currentSlide - slidesToShow);
-    }
-    return false;
-};
-exports.isSlideVisible = isSlideVisible;
 const getNextMoveIndex = (scrollMode, wrapAround, currentSlide, slideCount, slidesToScroll, slidesToShow, cellAlign) => {
@@ -32,0 +7,0 @@ if (wrapAround) {

lib/utils.test.js

@@ -5,94 +5,2 @@ "use strict";
 const utils_1 = require("./utils");
-describe('isSlideVisible', () => {
-    it.each `
-    currentSlide | indexToCheck | slidesToShow | expected
-    ${1}         | ${0}         | ${2}         | ${false}
-    ${1}         | ${1}         | ${2}         | ${true}
-    ${1}         | ${2}         | ${2}         | ${true}
-    ${1}         | ${3}         | ${2}         | ${false}
-    ${1}         | ${0}         | ${1.5}       | ${false}
-    ${1}         | ${1}         | ${1.5}       | ${true}
-    ${1}         | ${2}         | ${1.5}       | ${true}
-    ${1}         | ${3}         | ${1.5}       | ${false}
-    ${1.5}       | ${0}         | ${2}         | ${false}
-    ${1.5}       | ${1}         | ${2}         | ${true}
-    ${1.5}       | ${2}         | ${2}         | ${true}
-    ${1.5}       | ${3}         | ${2}         | ${true}
-    ${1.5}       | ${4}         | ${2}         | ${false}
-    ${1}         | ${0}         | ${1}         | ${false}
-    ${1}         | ${1}         | ${1}         | ${true}
-    ${1}         | ${2}         | ${1}         | ${false}
-    ${1.5}       | ${0}         | ${1}         | ${false}
-    ${1.5}       | ${1}         | ${1}         | ${true}
-    ${1.5}       | ${2}         | ${1}         | ${true}
-    ${1.5}       | ${3}         | ${1}         | ${false}
-  `('works with left align ' +
-        '(showing index $currentSlide, check index $indexToCheck, $slidesToShow slidesToShow)', ({ currentSlide, indexToCheck, slidesToShow, expected }) => {
-        expect((0, utils_1.isSlideVisible)(currentSlide, indexToCheck, slidesToShow, 'left')).toEqual(expected);
-    });
-    it.each `
-    currentSlide | indexToCheck | slidesToShow | expected
-    ${1}         | ${-1}        | ${2}         | ${false}
-    ${1}         | ${0}         | ${2}         | ${true}
-    ${1}         | ${1}         | ${2}         | ${true}
-    ${1}         | ${2}         | ${2}         | ${false}
-    ${1}         | ${-1}        | ${1.5}       | ${false}
-    ${1}         | ${0}         | ${1.5}       | ${true}
-    ${1}         | ${1}         | ${1.5}       | ${true}
-    ${1}         | ${2}         | ${1.5}       | ${false}
-    ${1.5}       | ${-1}        | ${2}         | ${false}
-    ${1.5}       | ${0}         | ${2}         | ${true}
-    ${1.5}       | ${1}         | ${2}         | ${true}
-    ${1.5}       | ${2}         | ${2}         | ${true}
-    ${1.5}       | ${3}         | ${2}         | ${false}
-    ${1}         | ${0}         | ${1}         | ${false}
-    ${1}         | ${1}         | ${1}         | ${true}
-    ${1}         | ${2}         | ${1}         | ${false}
-    ${1.5}       | ${0}         | ${1}         | ${false}
-    ${1.5}       | ${1}         | ${1}         | ${true}
-    ${1.5}       | ${2}         | ${1}         | ${true}
-    ${1.5}       | ${3}         | ${1}         | ${false}
-  `('works with right align ' +
-        '(showing index $currentSlide, check index $indexToCheck, $slidesToShow slidesToShow)', ({ currentSlide, indexToCheck, slidesToShow, expected }) => {
-        expect((0, utils_1.isSlideVisible)(currentSlide, indexToCheck, slidesToShow, 'right')).toEqual(expected);
-    });
-    it.each `
-    currentSlide | indexToCheck | slidesToShow | expected
-    ${1}         | ${-1}        | ${3}         | ${false}
-    ${1}         | ${0}         | ${3}         | ${true}
-    ${1}         | ${1}         | ${3}         | ${true}
-    ${1}         | ${2}         | ${3}         | ${true}
-    ${1}         | ${3}         | ${3}         | ${false}
-    ${1}         | ${-1}        | ${2.5}       | ${false}
-    ${1}         | ${0}         | ${2.5}       | ${true}
-    ${1}         | ${1}         | ${2.5}       | ${true}
-    ${1}         | ${2}         | ${2.5}       | ${true}
-    ${1}         | ${3}         | ${2.5}       | ${false}
-    ${1}         | ${-1}        | ${2}         | ${false}
-    ${1}         | ${0}         | ${2}         | ${true}
-    ${1}         | ${1}         | ${2}         | ${true}
-    ${1}         | ${2}         | ${2}         | ${true}
-    ${1}         | ${3}         | ${2}         | ${false}
-    ${1.2}       | ${-1}        | ${2}         | ${false}
-    ${1.2}       | ${0}         | ${2}         | ${true}
-    ${1.2}       | ${1}         | ${2}         | ${true}
-    ${1.2}       | ${2}         | ${2}         | ${true}
-    ${1.2}       | ${3}         | ${2}         | ${false}
-    ${1.7}       | ${0}         | ${2}         | ${false}
-    ${1.7}       | ${1}         | ${2}         | ${true}
-    ${1.7}       | ${2}         | ${2}         | ${true}
-    ${1.7}       | ${3}         | ${2}         | ${true}
-    ${1.7}       | ${4}         | ${2}         | ${false}
-    ${1}         | ${0}         | ${1}         | ${false}
-    ${1}         | ${1}         | ${1}         | ${true}
-    ${1}         | ${2}         | ${1}         | ${false}
-    ${1.5}       | ${0}         | ${1}         | ${false}
-    ${1.5}       | ${1}         | ${1}         | ${true}
-    ${1.5}       | ${2}         | ${1}         | ${true}
-    ${1.5}       | ${3}         | ${1}         | ${false}
-  `('works with center align ' +
-        '(showing index $currentSlide, check index $indexToCheck, $slidesToShow slidesToShow)', ({ currentSlide, indexToCheck, slidesToShow, expected }) => {
-        expect((0, utils_1.isSlideVisible)(currentSlide, indexToCheck, slidesToShow, 'center')).toEqual(expected);
-    });
-});
 describe('getNextMoveIndex', () => {
@@ -99,0 +7,0 @@ it.each `

package.json

 {
   "name": "nuka-carousel",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "Pure React Carousel",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,2 +0,2 @@
-# nuka-carousel
+[![Nuka Carousel — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/nuka-carousel/main/Nuka-Hero.png)](https://formidable.com/open-source/)
 
@@ -3,0 +3,0 @@ [![Maintenance Status][maintenance-image]](#maintenance-status)

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

Number of package files

93

increased by5.68%

Lines of code

4623

increased by0.35%

Worsened metrics

Total package byte prevSize

350182

decreased by-0.92%

No dependency changes