nuka-carousel - npm Package Compare versions

Comparing version 4.6.7 to 4.7.0

CHANGELOG.md

 # Nuka Changelog
 
+## 4.7.0 (2020-05-20)
+
+- [#695](https://github.com/FormidableLabs/nuka-carousel/pull/695) Add `slide-current` className to current 'active' slide, cleanup some utility functions
+- [#667](https://github.com/FormidableLabs/nuka-carousel/pull/667) Fixes Issue 622: Only fully visible slides are interactable. update wicg-inert version
+
+## 4.6.7 (2020-04-23)
+
+- [#687](https://github.com/FormidableLabs/nuka-carousel/pull/687) Fix Edge issue
+- [#683](https://github.com/FormidableLabs/nuka-carousel/pull/683) Rename param of afterSlide callback
+- [#680](https://github.com/FormidableLabs/nuka-carousel/pull/680) Fixes bug #586 - changing slide too quickly doesn't behave as expected 
+- [#677](https://github.com/FormidableLabs/nuka-carousel/pull/677) Update incorrect prop `getControlsContainerStyle`
+
 ## 4.6.6 (2020-03-10)
@@ -4,0 +16,0 @@

es/default-controls.js

@@ -1,3 +0,1 @@
-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); }
-
 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; }
@@ -9,18 +7,2 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import React from 'react';
@@ -41,242 +23,171 @@ import { getAlignmentOffset } from './utilities/style-utilities';
 
-export var PreviousButton =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(PreviousButton, _React$Component);
+export var PreviousButton = function PreviousButton(props) {
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    props.previousSlide();
+  };
 
-  function PreviousButton() {
-    var _this;
+  var _props$defaultControl = props.defaultControlsConfig,
+      prevButtonClassName = _props$defaultControl.prevButtonClassName,
+      _props$defaultControl2 = _props$defaultControl.prevButtonStyle,
+      prevButtonStyle = _props$defaultControl2 === void 0 ? {} : _props$defaultControl2,
+      prevButtonText = _props$defaultControl.prevButtonText;
+  var disabled = props.currentSlide === 0 && !props.wrapAround || props.slideCount === 0;
+  return React.createElement("button", {
+    className: prevButtonClassName,
+    style: _objectSpread({}, defaultButtonStyles(disabled), {}, prevButtonStyle),
+    disabled: disabled,
+    onClick: handleClick,
+    "aria-label": "previous",
+    type: "button"
+  }, prevButtonText || 'Prev');
+};
+export var nextButtonDisabled = function nextButtonDisabled(_ref) {
+  var cellAlign = _ref.cellAlign,
+      cellSpacing = _ref.cellSpacing,
+      currentSlide = _ref.currentSlide,
+      frameWidth = _ref.frameWidth,
+      positionValue = _ref.positionValue,
+      slideCount = _ref.slideCount,
+      slidesToShow = _ref.slidesToShow,
+      slideWidth = _ref.slideWidth,
+      wrapAround = _ref.wrapAround;
+  var buttonDisabled = false;
 
-    _classCallCheck(this, PreviousButton);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(PreviousButton).apply(this, arguments));
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    return _this;
+  if (!wrapAround) {
+    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;
   }
 
-  _createClass(PreviousButton, [{
-    key: "handleClick",
-    value: function handleClick(event) {
-      event.preventDefault();
-      this.props.previousSlide();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$defaultCo = this.props.defaultControlsConfig,
-          prevButtonClassName = _this$props$defaultCo.prevButtonClassName,
-          _this$props$defaultCo2 = _this$props$defaultCo.prevButtonStyle,
-          prevButtonStyle = _this$props$defaultCo2 === void 0 ? {} : _this$props$defaultCo2,
-          prevButtonText = _this$props$defaultCo.prevButtonText;
-      var disabled = this.props.currentSlide === 0 && !this.props.wrapAround || this.props.slideCount === 0;
-      return React.createElement("button", {
-        className: prevButtonClassName,
-        style: _objectSpread({}, defaultButtonStyles(disabled), {}, prevButtonStyle),
-        disabled: disabled,
-        onClick: this.handleClick,
-        "aria-label": "previous",
-        type: "button"
-      }, prevButtonText || 'Prev');
-    }
-  }]);
+  return buttonDisabled;
+};
+export var NextButton = function NextButton(props) {
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    props.nextSlide();
+  };
 
-  return PreviousButton;
-}(React.Component);
-export var NextButton =
-/*#__PURE__*/
-function (_React$Component2) {
-  _inherits(NextButton, _React$Component2);
+  var cellAlign = props.cellAlign,
+      cellSpacing = props.cellSpacing,
+      currentSlide = props.currentSlide,
+      defaultControlsConfig = props.defaultControlsConfig,
+      frameWidth = props.frameWidth,
+      left = props.left,
+      slideCount = props.slideCount,
+      slidesToShow = props.slidesToShow,
+      slideWidth = props.slideWidth,
+      top = props.top,
+      vertical = props.vertical,
+      wrapAround = props.wrapAround;
+  var nextButtonClassName = defaultControlsConfig.nextButtonClassName,
+      _defaultControlsConfi = defaultControlsConfig.nextButtonStyle,
+      nextButtonStyle = _defaultControlsConfi === void 0 ? {} : _defaultControlsConfi,
+      nextButtonText = defaultControlsConfig.nextButtonText;
+  var disabled = nextButtonDisabled({
+    cellAlign: cellAlign,
+    cellSpacing: cellSpacing,
+    currentSlide: currentSlide,
+    frameWidth: frameWidth,
+    positionValue: vertical ? top : left,
+    slideCount: slideCount,
+    slidesToShow: slidesToShow,
+    slideWidth: slideWidth,
+    wrapAround: wrapAround
+  });
+  return React.createElement("button", {
+    className: nextButtonClassName,
+    style: _objectSpread({}, defaultButtonStyles(disabled), {}, nextButtonStyle),
+    disabled: disabled,
+    onClick: handleClick,
+    "aria-label": "next",
+    type: "button"
+  }, nextButtonText || 'Next');
+};
+export var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign, scrollMode) {
+  var dotIndexes = [];
+  var lastDotIndex = slideCount - slidesToShow;
 
-  function NextButton() {
-    var _this2;
+  switch (cellAlign) {
+    case 'center':
+    case 'right':
+      lastDotIndex += slidesToShow - 1;
+      break;
+  }
 
-    _classCallCheck(this, NextButton);
+  if (lastDotIndex < 0) {
+    return [0];
+  }
 
-    _this2 = _possibleConstructorReturn(this, _getPrototypeOf(NextButton).apply(this, arguments));
-    _this2.handleClick = _this2.handleClick.bind(_assertThisInitialized(_this2));
-    _this2.nextButtonDisable = _this2.nextButtonDisabled.bind(_assertThisInitialized(_this2));
-    return _this2;
+  for (var i = 0; i < lastDotIndex; i += slidesToScroll) {
+    dotIndexes.push(i);
   }
 
-  _createClass(NextButton, [{
-    key: "handleClick",
-    value: function handleClick(event) {
-      event.preventDefault();
-      this.props.nextSlide();
-    }
-  }, {
-    key: "nextButtonDisabled",
-    value: function nextButtonDisabled(params) {
-      var cellAlign = params.cellAlign,
-          cellSpacing = params.cellSpacing,
-          currentSlide = params.currentSlide,
-          frameWidth = params.frameWidth,
-          positionValue = params.positionValue,
-          slideCount = params.slideCount,
-          slidesToShow = params.slidesToShow,
-          slideWidth = params.slideWidth,
-          wrapAround = params.wrapAround;
-      var buttonDisabled = false;
-
-      if (!wrapAround) {
-        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;
-      }
-
-      return buttonDisabled;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          cellAlign = _this$props.cellAlign,
-          cellSpacing = _this$props.cellSpacing,
-          currentSlide = _this$props.currentSlide,
-          frameWidth = _this$props.frameWidth,
-          left = _this$props.left,
-          slideCount = _this$props.slideCount,
-          slidesToShow = _this$props.slidesToShow,
-          slideWidth = _this$props.slideWidth,
-          top = _this$props.top,
-          vertical = _this$props.vertical,
-          wrapAround = _this$props.wrapAround;
-      var _this$props$defaultCo3 = this.props.defaultControlsConfig,
-          nextButtonClassName = _this$props$defaultCo3.nextButtonClassName,
-          _this$props$defaultCo4 = _this$props$defaultCo3.nextButtonStyle,
-          nextButtonStyle = _this$props$defaultCo4 === void 0 ? {} : _this$props$defaultCo4,
-          nextButtonText = _this$props$defaultCo3.nextButtonText;
-      var disabled = this.nextButtonDisabled({
-        cellAlign: cellAlign,
-        cellSpacing: cellSpacing,
-        currentSlide: currentSlide,
-        frameWidth: frameWidth,
-        positionValue: vertical ? top : left,
-        slideCount: slideCount,
-        slidesToShow: slidesToShow,
-        slideWidth: slideWidth,
-        wrapAround: wrapAround
-      });
-      return React.createElement("button", {
-        className: nextButtonClassName,
-        style: _objectSpread({}, defaultButtonStyles(disabled), {}, nextButtonStyle),
-        disabled: disabled,
-        onClick: this.handleClick,
-        "aria-label": "next",
-        type: "button"
-      }, nextButtonText || 'Next');
-    }
-  }]);
-
-  return NextButton;
-}(React.Component);
-export var PagingDots =
-/*#__PURE__*/
-function (_React$Component3) {
-  _inherits(PagingDots, _React$Component3);
-
-  function PagingDots() {
-    _classCallCheck(this, PagingDots);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(PagingDots).apply(this, arguments));
+  if (cellAlign === 'left' && scrollMode === 'page') {
+    lastDotIndex = Math.floor(slideCount - (slideCount % slidesToShow || slidesToShow));
   }
 
-  _createClass(PagingDots, [{
-    key: "getDotIndexes",
-    value: function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign, scrollMode) {
-      var dotIndexes = [];
-      var lastDotIndex = slideCount - slidesToShow;
+  dotIndexes.push(lastDotIndex);
+  return dotIndexes;
+};
+export var PagingDots = function PagingDots(props) {
+  var getListStyles = function getListStyles() {
+    return {
+      position: 'relative',
+      top: -10,
+      display: 'flex',
+      margin: 0,
+      padding: 0,
+      listStyleType: 'none'
+    };
+  };
 
-      switch (cellAlign) {
-        case 'center':
-        case 'right':
-          lastDotIndex += slidesToShow - 1;
-          break;
-      }
+  var getButtonStyles = function getButtonStyles(active) {
+    return {
+      cursor: 'pointer',
+      opacity: active ? 1 : 0.5,
+      background: 'transparent',
+      border: 'none',
+      fill: 'black'
+    };
+  };
 
-      if (lastDotIndex < 0) {
-        return [0];
-      }
-
-      for (var i = 0; i < lastDotIndex; i += slidesToScroll) {
-        dotIndexes.push(i);
-      }
-
-      if (cellAlign === 'left' && scrollMode === 'page') {
-        lastDotIndex = Math.floor(slideCount - (slideCount % slidesToShow || slidesToShow));
-      }
-
-      dotIndexes.push(lastDotIndex);
-      return dotIndexes;
-    }
-  }, {
-    key: "getListStyles",
-    value: function getListStyles() {
-      return {
-        position: 'relative',
-        top: -10,
-        display: 'flex',
-        margin: 0,
-        padding: 0,
-        listStyleType: 'none'
-      };
-    }
-  }, {
-    key: "getButtonStyles",
-    value: function getButtonStyles(active) {
-      return {
-        cursor: 'pointer',
-        opacity: active ? 1 : 0.5,
-        background: 'transparent',
-        border: 'none',
-        fill: 'black'
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var indexes = this.getDotIndexes(this.props.slideCount, this.props.slidesToScroll, this.props.slidesToShow, this.props.cellAlign, this.props.scrollMode);
-      var _this$props$defaultCo5 = this.props.defaultControlsConfig,
-          pagingDotsContainerClassName = _this$props$defaultCo5.pagingDotsContainerClassName,
-          pagingDotsClassName = _this$props$defaultCo5.pagingDotsClassName,
-          _this$props$defaultCo6 = _this$props$defaultCo5.pagingDotsStyle,
-          pagingDotsStyle = _this$props$defaultCo6 === void 0 ? {} : _this$props$defaultCo6;
-      return React.createElement("ul", {
-        className: pagingDotsContainerClassName,
-        style: this.getListStyles()
-      }, indexes.map(function (index) {
-        var isActive = _this3.props.currentSlide === index;
-        return React.createElement("li", {
-          key: index,
-          className: isActive ? 'paging-item active' : 'paging-item'
-        }, React.createElement("button", {
-          className: pagingDotsClassName,
-          type: "button",
-          style: _objectSpread({}, _this3.getButtonStyles(isActive), {}, pagingDotsStyle),
-          onClick: _this3.props.goToSlide.bind(null, index),
-          "aria-label": "slide ".concat(index + 1, " bullet")
-        }, React.createElement("svg", {
-          className: "paging-dot",
-          width: "6",
-          height: "6"
-        }, React.createElement("circle", {
-          cx: "3",
-          cy: "3",
-          r: "3"
-        }))));
-      }));
-    }
-  }]);
-
-  return PagingDots;
-}(React.Component);
+  var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.slidesToShow, props.cellAlign, props.scrollMode);
+  var _props$defaultControl3 = props.defaultControlsConfig,
+      pagingDotsContainerClassName = _props$defaultControl3.pagingDotsContainerClassName,
+      pagingDotsClassName = _props$defaultControl3.pagingDotsClassName,
+      _props$defaultControl4 = _props$defaultControl3.pagingDotsStyle,
+      pagingDotsStyle = _props$defaultControl4 === void 0 ? {} : _props$defaultControl4;
+  return React.createElement("ul", {
+    className: pagingDotsContainerClassName,
+    style: getListStyles()
+  }, indexes.map(function (index) {
+    var isActive = props.currentSlide === index;
+    return React.createElement("li", {
+      key: index,
+      className: isActive ? 'paging-item active' : 'paging-item'
+    }, React.createElement("button", {
+      className: pagingDotsClassName,
+      type: "button",
+      style: _objectSpread({}, getButtonStyles(isActive), {}, pagingDotsStyle),
+      onClick: props.goToSlide.bind(null, index),
+      "aria-label": "slide ".concat(index + 1, " bullet")
+    }, React.createElement("svg", {
+      className: "paging-dot",
+      width: "6",
+      height: "6"
+    }, React.createElement("circle", {
+      cx: "3",
+      cy: "3",
+      r: "3"
+    }))));
+  }));
+};

es/index.js

@@ -28,2 +28,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 'wicg-inert';
 import PropTypes from 'prop-types';
@@ -36,5 +37,5 @@ import ExecutionEnvironment from 'exenv';
 import AnnounceSlide, { defaultRenderAnnounceSlideMessage } from './announce-slide';
-import { addEvent, removeEvent, getPropsByTransitionMode, swipeDirection, shouldUpdate, calcSomeInitialState } from './utilities/utilities';
+import { addAccessibility, addEvent, removeEvent, getPropsByTransitionMode, swipeDirection, shouldUpdate, calcSomeInitialState } from './utilities/utilities';
 import { getAlignmentOffset, getImgTagStyles, getDecoratorStyles, getSliderStyles, getFrameStyles, getTransitionProps } from './utilities/style-utilities';
-import { addAccessibility, getValidChildren, calculateSlideHeight } from './utilities/bootstrapping-utilities';
+import { getValidChildren, calculateSlideHeight } from './utilities/bootstrapping-utilities';
 
@@ -156,3 +157,3 @@ var Carousel =
       this.keyCodeMap = this.getKeyCodeMap(keyCodeConfig);
-      this.getlockScrollEvents().lockTouchScroll();
+      this.getLockScrollEvents().lockTouchScroll();
       var heightCheckDelay = 200;
@@ -257,3 +258,3 @@
 
-      this.getlockScrollEvents().unlockTouchScroll();
+      this.getLockScrollEvents().unlockTouchScroll();
     }
@@ -300,4 +301,4 @@ }, {
   }, {
-    key: "getlockScrollEvents",
-    value: function getlockScrollEvents() {
+    key: "getLockScrollEvents",
+    value: function getLockScrollEvents() {
       var _this4 = this;
@@ -547,3 +548,4 @@
 
-      var touchLength = this.touchObject.length || 0;
+      var touchLength = this.touchObject.length || 0; // touchLength must be longer than 1/5 the slideWidth / slidesToShow
+      // for swiping to be initiated
 
@@ -550,0 +552,0 @@ if (touchLength > this.state.slideWidth / slidesToShow / 5) {

es/transitions/fade-transition.js

@@ -22,3 +22,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 { getSlideHeight } from '../utilities/style-utilities';
-import { handleSelfFocus } from '../utilities/utilities';
+import { handleSelfFocus, getSlideClassName } from '../utilities/utilities';
 
@@ -49,5 +49,4 @@ var FadeTransition =
       return React.Children.map(children, function (child, index) {
-        var visible = index >= currentSlide && index < currentSlide + slidesToShow;
         return React.createElement("li", {
-          className: "slider-slide".concat(visible ? ' slide-visible' : ''),
+          className: "slider-slide".concat(getSlideClassName(index, currentSlide, slidesToShow)),
           style: _this2.getSlideStyles(index, opacity),
@@ -54,0 +53,0 @@ key: index,

es/transitions/scroll-transition.js

 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); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -22,3 +24,3 @@
 import { getSlideHeight, getAlignmentOffset } from '../utilities/style-utilities';
-import { getSlideDirection, handleSelfFocus } from '../utilities/utilities';
+import { getSlideDirection, handleSelfFocus, getSlideClassName, isFullyVisible } from '../utilities/utilities';
 var MIN_ZOOM_SCALE = 0;
@@ -105,5 +107,8 @@ var MAX_ZOOM_SCALE = 1;
       return React.Children.map(children, function (child, index) {
-        var visible = index >= currentSlide && index < currentSlide + slidesToShow;
-        return React.createElement("li", {
-          className: "slider-slide".concat(visible ? ' slide-visible' : ''),
+        var isVisible = isFullyVisible(index, _this2.props);
+        var inert = isVisible ? {} : {
+          inert: 'true'
+        };
+        return React.createElement("li", _extends({
+          className: "slider-slide".concat(getSlideClassName(index, currentSlide, slidesToShow)),
           style: _this2.getSlideStyles(index, positionValue),
@@ -113,3 +118,3 @@ key: index,
           tabIndex: -1
-        }, child);
+        }, inert), child);
       });
@@ -116,0 +121,0 @@ }

es/utilities/bootstrapping-utilities.js

 import React from 'react';
-export var addAccessibility = function addAccessibility(children, slidesToShow) {
-  if (slidesToShow > 1) {
-    return React.Children.map(children, function (child) {
-      return React.cloneElement(child, child.props);
-    });
-  } else {
-    // when slidesToshow is 1
-    return React.Children.map(children, function (child) {
-      return React.cloneElement(child, child.props);
-    });
-  }
-};
 export var getValidChildren = function getValidChildren(children) {
@@ -15,0 +3,0 @@ // .toArray automatically removes invalid React children

es/utilities/utilities.js

@@ -8,2 +8,3 @@ 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; }
 import React from 'react';
+import { getAlignmentOffset } from './style-utilities';
 export var addEvent = function addEvent(elem, type, eventHandle) {
@@ -64,2 +65,17 @@ if (elem === null || typeof elem === 'undefined') {
 };
+export var getSlideClassName = function getSlideClassName(index, currentSlide, slidesToShow) {
+  var className = '';
+  var visible = index >= currentSlide && index < currentSlide + slidesToShow;
+  var current = index === currentSlide;
+
+  if (visible) {
+    className = ' slide-visible';
+
+    if (current) {
+      className = className.concat(' slide-current');
+    }
+  }
+
+  return className;
+};
 export var getPropsByTransitionMode = function getPropsByTransitionMode(props, keys) {
@@ -177,2 +193,30 @@ var slidesToShow = props.slidesToShow,
   }
+};
+export var isFullyVisible = function isFullyVisible(slideIndex, config) {
+  var currentSlide = config.currentSlide,
+      cellSpacing = config.cellSpacing,
+      slideCount = config.slideCount,
+      slideWidth = config.slideWidth,
+      frameWidth = config.frameWidth,
+      wrapAround = config.wrapAround; // Slide width can't be 0
+
+  var fullSlideWidth = slideWidth || 1; // Calculate offset without cellSpacing
+
+  var offsetWidth = getAlignmentOffset(currentSlide, config) + cellSpacing * currentSlide;
+  var remainingWidth = frameWidth - offsetWidth;
+  var fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth), 0);
+  var fullSlidesAfter = Math.max(Math.floor(remainingWidth / fullSlideWidth) - 1, 0);
+  var currentSlideIndex = Math.ceil(currentSlide);
+  var fullyVisibleSlides = [];
+
+  for (var i = currentSlideIndex - fullSlidesBefore; i < currentSlideIndex + fullSlidesAfter + 1; i++) {
+    if (i < 0) {
+      // -1 won't match a slide index
+      fullyVisibleSlides.push(wrapAround ? slideCount + i : -1);
+    } else {
+      fullyVisibleSlides.push(i > slideCount - 1 ? i - slideCount : i);
+    }
+  }
+
+  return fullyVisibleSlides.includes(slideIndex);
 };

lib/default-controls.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.PagingDots = exports.NextButton = exports.PreviousButton = void 0;
+exports.PagingDots = exports.getDotIndexes = exports.NextButton = exports.nextButtonDisabled = exports.PreviousButton = void 0;
 
@@ -15,4 +15,2 @@ var _react = _interopRequireDefault(require("react"));
 
-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); }
-
 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; }
@@ -24,18 +22,2 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 var defaultButtonStyles = function defaultButtonStyles(disabled) {
@@ -53,250 +35,185 @@ return {
 
-var PreviousButton =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(PreviousButton, _React$Component);
+var PreviousButton = function PreviousButton(props) {
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    props.previousSlide();
+  };
 
-  function PreviousButton() {
-    var _this;
+  var _props$defaultControl = props.defaultControlsConfig,
+      prevButtonClassName = _props$defaultControl.prevButtonClassName,
+      _props$defaultControl2 = _props$defaultControl.prevButtonStyle,
+      prevButtonStyle = _props$defaultControl2 === void 0 ? {} : _props$defaultControl2,
+      prevButtonText = _props$defaultControl.prevButtonText;
+  var disabled = props.currentSlide === 0 && !props.wrapAround || props.slideCount === 0;
+  return _react["default"].createElement("button", {
+    className: prevButtonClassName,
+    style: _objectSpread({}, defaultButtonStyles(disabled), {}, prevButtonStyle),
+    disabled: disabled,
+    onClick: handleClick,
+    "aria-label": "previous",
+    type: "button"
+  }, prevButtonText || 'Prev');
+};
 
-    _classCallCheck(this, PreviousButton);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(PreviousButton).apply(this, arguments));
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(PreviousButton, [{
-    key: "handleClick",
-    value: function handleClick(event) {
-      event.preventDefault();
-      this.props.previousSlide();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$defaultCo = this.props.defaultControlsConfig,
-          prevButtonClassName = _this$props$defaultCo.prevButtonClassName,
-          _this$props$defaultCo2 = _this$props$defaultCo.prevButtonStyle,
-          prevButtonStyle = _this$props$defaultCo2 === void 0 ? {} : _this$props$defaultCo2,
-          prevButtonText = _this$props$defaultCo.prevButtonText;
-      var disabled = this.props.currentSlide === 0 && !this.props.wrapAround || this.props.slideCount === 0;
-      return _react["default"].createElement("button", {
-        className: prevButtonClassName,
-        style: _objectSpread({}, defaultButtonStyles(disabled), {}, prevButtonStyle),
-        disabled: disabled,
-        onClick: this.handleClick,
-        "aria-label": "previous",
-        type: "button"
-      }, prevButtonText || 'Prev');
-    }
-  }]);
-
-  return PreviousButton;
-}(_react["default"].Component);
-
 exports.PreviousButton = PreviousButton;
 
-var NextButton =
-/*#__PURE__*/
-function (_React$Component2) {
-  _inherits(NextButton, _React$Component2);
+var nextButtonDisabled = function nextButtonDisabled(_ref) {
+  var cellAlign = _ref.cellAlign,
+      cellSpacing = _ref.cellSpacing,
+      currentSlide = _ref.currentSlide,
+      frameWidth = _ref.frameWidth,
+      positionValue = _ref.positionValue,
+      slideCount = _ref.slideCount,
+      slidesToShow = _ref.slidesToShow,
+      slideWidth = _ref.slideWidth,
+      wrapAround = _ref.wrapAround;
+  var buttonDisabled = false;
 
-  function NextButton() {
-    var _this2;
-
-    _classCallCheck(this, NextButton);
-
-    _this2 = _possibleConstructorReturn(this, _getPrototypeOf(NextButton).apply(this, arguments));
-    _this2.handleClick = _this2.handleClick.bind(_assertThisInitialized(_this2));
-    _this2.nextButtonDisable = _this2.nextButtonDisabled.bind(_assertThisInitialized(_this2));
-    return _this2;
+  if (!wrapAround) {
+    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;
   }
 
-  _createClass(NextButton, [{
-    key: "handleClick",
-    value: function handleClick(event) {
-      event.preventDefault();
-      this.props.nextSlide();
-    }
-  }, {
-    key: "nextButtonDisabled",
-    value: function nextButtonDisabled(params) {
-      var cellAlign = params.cellAlign,
-          cellSpacing = params.cellSpacing,
-          currentSlide = params.currentSlide,
-          frameWidth = params.frameWidth,
-          positionValue = params.positionValue,
-          slideCount = params.slideCount,
-          slidesToShow = params.slidesToShow,
-          slideWidth = params.slideWidth,
-          wrapAround = params.wrapAround;
-      var buttonDisabled = false;
+  return buttonDisabled;
+};
 
-      if (!wrapAround) {
-        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;
-      }
+exports.nextButtonDisabled = nextButtonDisabled;
 
-      return buttonDisabled;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          cellAlign = _this$props.cellAlign,
-          cellSpacing = _this$props.cellSpacing,
-          currentSlide = _this$props.currentSlide,
-          frameWidth = _this$props.frameWidth,
-          left = _this$props.left,
-          slideCount = _this$props.slideCount,
-          slidesToShow = _this$props.slidesToShow,
-          slideWidth = _this$props.slideWidth,
-          top = _this$props.top,
-          vertical = _this$props.vertical,
-          wrapAround = _this$props.wrapAround;
-      var _this$props$defaultCo3 = this.props.defaultControlsConfig,
-          nextButtonClassName = _this$props$defaultCo3.nextButtonClassName,
-          _this$props$defaultCo4 = _this$props$defaultCo3.nextButtonStyle,
-          nextButtonStyle = _this$props$defaultCo4 === void 0 ? {} : _this$props$defaultCo4,
-          nextButtonText = _this$props$defaultCo3.nextButtonText;
-      var disabled = this.nextButtonDisabled({
-        cellAlign: cellAlign,
-        cellSpacing: cellSpacing,
-        currentSlide: currentSlide,
-        frameWidth: frameWidth,
-        positionValue: vertical ? top : left,
-        slideCount: slideCount,
-        slidesToShow: slidesToShow,
-        slideWidth: slideWidth,
-        wrapAround: wrapAround
-      });
-      return _react["default"].createElement("button", {
-        className: nextButtonClassName,
-        style: _objectSpread({}, defaultButtonStyles(disabled), {}, nextButtonStyle),
-        disabled: disabled,
-        onClick: this.handleClick,
-        "aria-label": "next",
-        type: "button"
-      }, nextButtonText || 'Next');
-    }
-  }]);
+var NextButton = function NextButton(props) {
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    props.nextSlide();
+  };
 
-  return NextButton;
-}(_react["default"].Component);
+  var cellAlign = props.cellAlign,
+      cellSpacing = props.cellSpacing,
+      currentSlide = props.currentSlide,
+      defaultControlsConfig = props.defaultControlsConfig,
+      frameWidth = props.frameWidth,
+      left = props.left,
+      slideCount = props.slideCount,
+      slidesToShow = props.slidesToShow,
+      slideWidth = props.slideWidth,
+      top = props.top,
+      vertical = props.vertical,
+      wrapAround = props.wrapAround;
+  var nextButtonClassName = defaultControlsConfig.nextButtonClassName,
+      _defaultControlsConfi = defaultControlsConfig.nextButtonStyle,
+      nextButtonStyle = _defaultControlsConfi === void 0 ? {} : _defaultControlsConfi,
+      nextButtonText = defaultControlsConfig.nextButtonText;
+  var disabled = nextButtonDisabled({
+    cellAlign: cellAlign,
+    cellSpacing: cellSpacing,
+    currentSlide: currentSlide,
+    frameWidth: frameWidth,
+    positionValue: vertical ? top : left,
+    slideCount: slideCount,
+    slidesToShow: slidesToShow,
+    slideWidth: slideWidth,
+    wrapAround: wrapAround
+  });
+  return _react["default"].createElement("button", {
+    className: nextButtonClassName,
+    style: _objectSpread({}, defaultButtonStyles(disabled), {}, nextButtonStyle),
+    disabled: disabled,
+    onClick: handleClick,
+    "aria-label": "next",
+    type: "button"
+  }, nextButtonText || 'Next');
+};
 
 exports.NextButton = NextButton;
 
-var PagingDots =
-/*#__PURE__*/
-function (_React$Component3) {
-  _inherits(PagingDots, _React$Component3);
+var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign, scrollMode) {
+  var dotIndexes = [];
+  var lastDotIndex = slideCount - slidesToShow;
 
-  function PagingDots() {
-    _classCallCheck(this, PagingDots);
+  switch (cellAlign) {
+    case 'center':
+    case 'right':
+      lastDotIndex += slidesToShow - 1;
+      break;
+  }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(PagingDots).apply(this, arguments));
+  if (lastDotIndex < 0) {
+    return [0];
   }
 
-  _createClass(PagingDots, [{
-    key: "getDotIndexes",
-    value: function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign, scrollMode) {
-      var dotIndexes = [];
-      var lastDotIndex = slideCount - slidesToShow;
+  for (var i = 0; i < lastDotIndex; i += slidesToScroll) {
+    dotIndexes.push(i);
+  }
 
-      switch (cellAlign) {
-        case 'center':
-        case 'right':
-          lastDotIndex += slidesToShow - 1;
-          break;
-      }
+  if (cellAlign === 'left' && scrollMode === 'page') {
+    lastDotIndex = Math.floor(slideCount - (slideCount % slidesToShow || slidesToShow));
+  }
 
-      if (lastDotIndex < 0) {
-        return [0];
-      }
+  dotIndexes.push(lastDotIndex);
+  return dotIndexes;
+};
 
-      for (var i = 0; i < lastDotIndex; i += slidesToScroll) {
-        dotIndexes.push(i);
-      }
+exports.getDotIndexes = getDotIndexes;
 
-      if (cellAlign === 'left' && scrollMode === 'page') {
-        lastDotIndex = Math.floor(slideCount - (slideCount % slidesToShow || slidesToShow));
-      }
+var PagingDots = function PagingDots(props) {
+  var getListStyles = function getListStyles() {
+    return {
+      position: 'relative',
+      top: -10,
+      display: 'flex',
+      margin: 0,
+      padding: 0,
+      listStyleType: 'none'
+    };
+  };
 
-      dotIndexes.push(lastDotIndex);
-      return dotIndexes;
-    }
-  }, {
-    key: "getListStyles",
-    value: function getListStyles() {
-      return {
-        position: 'relative',
-        top: -10,
-        display: 'flex',
-        margin: 0,
-        padding: 0,
-        listStyleType: 'none'
-      };
-    }
-  }, {
-    key: "getButtonStyles",
-    value: function getButtonStyles(active) {
-      return {
-        cursor: 'pointer',
-        opacity: active ? 1 : 0.5,
-        background: 'transparent',
-        border: 'none',
-        fill: 'black'
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  var getButtonStyles = function getButtonStyles(active) {
+    return {
+      cursor: 'pointer',
+      opacity: active ? 1 : 0.5,
+      background: 'transparent',
+      border: 'none',
+      fill: 'black'
+    };
+  };
 
-      var indexes = this.getDotIndexes(this.props.slideCount, this.props.slidesToScroll, this.props.slidesToShow, this.props.cellAlign, this.props.scrollMode);
-      var _this$props$defaultCo5 = this.props.defaultControlsConfig,
-          pagingDotsContainerClassName = _this$props$defaultCo5.pagingDotsContainerClassName,
-          pagingDotsClassName = _this$props$defaultCo5.pagingDotsClassName,
-          _this$props$defaultCo6 = _this$props$defaultCo5.pagingDotsStyle,
-          pagingDotsStyle = _this$props$defaultCo6 === void 0 ? {} : _this$props$defaultCo6;
-      return _react["default"].createElement("ul", {
-        className: pagingDotsContainerClassName,
-        style: this.getListStyles()
-      }, indexes.map(function (index) {
-        var isActive = _this3.props.currentSlide === index;
-        return _react["default"].createElement("li", {
-          key: index,
-          className: isActive ? 'paging-item active' : 'paging-item'
-        }, _react["default"].createElement("button", {
-          className: pagingDotsClassName,
-          type: "button",
-          style: _objectSpread({}, _this3.getButtonStyles(isActive), {}, pagingDotsStyle),
-          onClick: _this3.props.goToSlide.bind(null, index),
-          "aria-label": "slide ".concat(index + 1, " bullet")
-        }, _react["default"].createElement("svg", {
-          className: "paging-dot",
-          width: "6",
-          height: "6"
-        }, _react["default"].createElement("circle", {
-          cx: "3",
-          cy: "3",
-          r: "3"
-        }))));
-      }));
-    }
-  }]);
+  var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.slidesToShow, props.cellAlign, props.scrollMode);
+  var _props$defaultControl3 = props.defaultControlsConfig,
+      pagingDotsContainerClassName = _props$defaultControl3.pagingDotsContainerClassName,
+      pagingDotsClassName = _props$defaultControl3.pagingDotsClassName,
+      _props$defaultControl4 = _props$defaultControl3.pagingDotsStyle,
+      pagingDotsStyle = _props$defaultControl4 === void 0 ? {} : _props$defaultControl4;
+  return _react["default"].createElement("ul", {
+    className: pagingDotsContainerClassName,
+    style: getListStyles()
+  }, indexes.map(function (index) {
+    var isActive = props.currentSlide === index;
+    return _react["default"].createElement("li", {
+      key: index,
+      className: isActive ? 'paging-item active' : 'paging-item'
+    }, _react["default"].createElement("button", {
+      className: pagingDotsClassName,
+      type: "button",
+      style: _objectSpread({}, getButtonStyles(isActive), {}, pagingDotsStyle),
+      onClick: props.goToSlide.bind(null, index),
+      "aria-label": "slide ".concat(index + 1, " bullet")
+    }, _react["default"].createElement("svg", {
+      className: "paging-dot",
+      width: "6",
+      height: "6"
+    }, _react["default"].createElement("circle", {
+      cx: "3",
+      cy: "3",
+      r: "3"
+    }))));
+  }));
+};
 
-  return PagingDots;
-}(_react["default"].Component);
-
 exports.PagingDots = PagingDots;

lib/index.js

@@ -28,2 +28,4 @@ "use strict";
 
+require("wicg-inert");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -196,3 +198,3 @@
       this.keyCodeMap = this.getKeyCodeMap(keyCodeConfig);
-      this.getlockScrollEvents().lockTouchScroll();
+      this.getLockScrollEvents().lockTouchScroll();
       var heightCheckDelay = 200;
@@ -297,3 +299,3 @@
 
-      this.getlockScrollEvents().unlockTouchScroll();
+      this.getLockScrollEvents().unlockTouchScroll();
     }
@@ -340,4 +342,4 @@ }, {
   }, {
-    key: "getlockScrollEvents",
-    value: function getlockScrollEvents() {
+    key: "getLockScrollEvents",
+    value: function getLockScrollEvents() {
       var _this4 = this;
@@ -587,3 +589,4 @@
 
-      var touchLength = this.touchObject.length || 0;
+      var touchLength = this.touchObject.length || 0; // touchLength must be longer than 1/5 the slideWidth / slidesToShow
+      // for swiping to be initiated
 
@@ -1214,3 +1217,3 @@ if (touchLength > this.state.slideWidth / slidesToShow / 5) {
             deltaY: ty
-          }), (0, _bootstrappingUtilities.addAccessibility)(validChildren, slidesToShow, currentSlide));
+          }), (0, _utilities.addAccessibility)(validChildren, slidesToShow, currentSlide));
         }
@@ -1217,0 +1220,0 @@ })), this.renderControls(), this.props.autoGenerateStyleTag && _react["default"].createElement("style", {

lib/transitions/fade-transition.js

@@ -60,5 +60,4 @@ "use strict";
       return _react["default"].Children.map(children, function (child, index) {
-        var visible = index >= currentSlide && index < currentSlide + slidesToShow;
         return _react["default"].createElement("li", {
-          className: "slider-slide".concat(visible ? ' slide-visible' : ''),
+          className: "slider-slide".concat((0, _utilities.getSlideClassName)(index, currentSlide, slidesToShow)),
           style: _this2.getSlideStyles(index, opacity),
@@ -65,0 +64,0 @@ key: index,

lib/transitions/scroll-transition.js

@@ -20,2 +20,4 @@ "use strict";
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -118,5 +120,8 @@
       return _react["default"].Children.map(children, function (child, index) {
-        var visible = index >= currentSlide && index < currentSlide + slidesToShow;
-        return _react["default"].createElement("li", {
-          className: "slider-slide".concat(visible ? ' slide-visible' : ''),
+        var isVisible = (0, _utilities.isFullyVisible)(index, _this2.props);
+        var inert = isVisible ? {} : {
+          inert: 'true'
+        };
+        return _react["default"].createElement("li", _extends({
+          className: "slider-slide".concat((0, _utilities.getSlideClassName)(index, currentSlide, slidesToShow)),
           style: _this2.getSlideStyles(index, positionValue),
@@ -126,3 +131,3 @@ key: index,
           tabIndex: -1
-        }, child);
+        }, inert), child);
       });
@@ -129,0 +134,0 @@ }

lib/utilities/bootstrapping-utilities.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.calculateSlideHeight = exports.findCurrentHeightSlide = exports.findMaxHeightSlideInRange = exports.getValidChildren = exports.addAccessibility = void 0;
+exports.calculateSlideHeight = exports.findCurrentHeightSlide = exports.findMaxHeightSlideInRange = exports.getValidChildren = void 0;
 
@@ -13,17 +13,2 @@ var _react = _interopRequireDefault(require("react"));
 
-var addAccessibility = function addAccessibility(children, slidesToShow) {
-  if (slidesToShow > 1) {
-    return _react["default"].Children.map(children, function (child) {
-      return _react["default"].cloneElement(child, child.props);
-    });
-  } else {
-    // when slidesToshow is 1
-    return _react["default"].Children.map(children, function (child) {
-      return _react["default"].cloneElement(child, child.props);
-    });
-  }
-};
-
-exports.addAccessibility = addAccessibility;
-
 var getValidChildren = function getValidChildren(children) {
@@ -30,0 +15,0 @@ // .toArray automatically removes invalid React children

lib/utilities/utilities.js

@@ -6,6 +6,8 @@ "use strict";
 });
-exports.handleSelfFocus = exports.calcSomeInitialState = exports.shouldUpdate = exports.getSlideDirection = exports.swipeDirection = exports.getPropsByTransitionMode = exports.addAccessibility = exports.removeEvent = exports.addEvent = void 0;
+exports.isFullyVisible = exports.handleSelfFocus = exports.calcSomeInitialState = exports.shouldUpdate = exports.getSlideDirection = exports.swipeDirection = exports.getPropsByTransitionMode = exports.getSlideClassName = exports.addAccessibility = exports.removeEvent = exports.addEvent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styleUtilities = require("./style-utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -83,2 +85,20 @@
 
+var getSlideClassName = function getSlideClassName(index, currentSlide, slidesToShow) {
+  var className = '';
+  var visible = index >= currentSlide && index < currentSlide + slidesToShow;
+  var current = index === currentSlide;
+
+  if (visible) {
+    className = ' slide-visible';
+
+    if (current) {
+      className = className.concat(' slide-current');
+    }
+  }
+
+  return className;
+};
+
+exports.getSlideClassName = getSlideClassName;
+
 var getPropsByTransitionMode = function getPropsByTransitionMode(props, keys) {
@@ -213,2 +233,33 @@ var slidesToShow = props.slidesToShow,
 
-exports.handleSelfFocus = handleSelfFocus;
+exports.handleSelfFocus = handleSelfFocus;
+
+var isFullyVisible = function isFullyVisible(slideIndex, config) {
+  var currentSlide = config.currentSlide,
+      cellSpacing = config.cellSpacing,
+      slideCount = config.slideCount,
+      slideWidth = config.slideWidth,
+      frameWidth = config.frameWidth,
+      wrapAround = config.wrapAround; // Slide width can't be 0
+
+  var fullSlideWidth = slideWidth || 1; // Calculate offset without cellSpacing
+
+  var offsetWidth = (0, _styleUtilities.getAlignmentOffset)(currentSlide, config) + cellSpacing * currentSlide;
+  var remainingWidth = frameWidth - offsetWidth;
+  var fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth), 0);
+  var fullSlidesAfter = Math.max(Math.floor(remainingWidth / fullSlideWidth) - 1, 0);
+  var currentSlideIndex = Math.ceil(currentSlide);
+  var fullyVisibleSlides = [];
+
+  for (var i = currentSlideIndex - fullSlidesBefore; i < currentSlideIndex + fullSlidesAfter + 1; i++) {
+    if (i < 0) {
+      // -1 won't match a slide index
+      fullyVisibleSlides.push(wrapAround ? slideCount + i : -1);
+    } else {
+      fullyVisibleSlides.push(i > slideCount - 1 ? i - slideCount : i);
+    }
+  }
+
+  return fullyVisibleSlides.includes(slideIndex);
+};
+
+exports.isFullyVisible = isFullyVisible;

package.json

 {
   "name": "nuka-carousel",
-  "version": "4.6.7",
+  "version": "4.7.0",
   "description": "Pure React Carousel",
@@ -14,3 +14,4 @@ "main": "index.js",
     "prop-types": "^15.6.0",
-    "react-move": "^6.1.0"
+    "react-move": "^6.1.0",
+    "wicg-inert": "^3.0.3"
   },
@@ -17,0 +18,0 @@ "devDependencies": {

README.md

@@ -143,3 +143,3 @@ [![Maintenance Status][maintenance-image]](#maintenance-status)
 
-- NOTE: The className `slide-visible` is added to the currently visible slide.
+- NOTE: The className `slide-visible` is added to the currently visible slide or slides (when slidesToShow > 1). The className `slide-current` is added to the currently "active" slide.
 
@@ -146,0 +146,0 @@ #### renderAnnounceSlideMessage

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

Worsened metrics

Total package byte prevSize

279113

decreased by-1.57%

Dependency count

8

increased by14.29%

Lines of code

5410

decreased by-1.42%

Dependency changes

• + Addedwicg-inert@^3.0.3

• + Addedwicg-inert@3.1.3(transitive)