@itseasy21/react-elastic-carousel/dist/index.es.js

A flexible and responsive carousel component for react

import React, { Children } from 'react';
import PropTypes from 'prop-types';
import ResizeObserver from 'resize-observer-polyfill';
import { useSwipeable } from 'react-swipeable';
import styled from 'styled-components';
import { jsx, jsxs } from 'react/jsx-runtime';
import cx from 'classnames';

function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}

function _objectWithoutProperties(e, t) {
  if (null == e) return {};
  var o,
    r,
    i = _objectWithoutPropertiesLoose(e, t);
  if (Object.getOwnPropertySymbols) {
    var n = Object.getOwnPropertySymbols(e);
    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
  }
  return i;
}

function _classCallCheck(a, n) {
  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}

function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}

function toPrimitive(t, r) {
  if ("object" != _typeof(t) || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r);
    if ("object" != _typeof(i)) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}

function toPropertyKey(t) {
  var i = toPrimitive(t, "string");
  return "symbol" == _typeof(i) ? i : i + "";
}

function _defineProperties(e, r) {
  for (var t = 0; t < r.length; t++) {
    var o = r[t];
    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, toPropertyKey(o.key), o);
  }
}
function _createClass(e, r, t) {
  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
    writable: false
  }), e;
}

function _assertThisInitialized(e) {
  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return e;
}

function _possibleConstructorReturn(t, e) {
  if (e && ("object" == _typeof(e) || "function" == typeof e)) return e;
  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
  return _assertThisInitialized(t);
}

function _getPrototypeOf(t) {
  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
    return t.__proto__ || Object.getPrototypeOf(t);
  }, _getPrototypeOf(t);
}

function _setPrototypeOf(t, e) {
  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
    return t.__proto__ = e, t;
  }, _setPrototypeOf(t, e);
}

function _inherits(t, e) {
  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
  t.prototype = Object.create(e && e.prototype, {
    constructor: {
      value: t,
      writable: true,
      configurable: true
    }
  }), Object.defineProperty(t, "prototype", {
    writable: false
  }), e && _setPrototypeOf(t, e);
}

function _defineProperty(e, r, t) {
  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: true,
    configurable: true,
    writable: true
  }) : e[r] = t, e;
}

function _arrayLikeToArray$1(r, a) {
  (null == a || a > r.length) && (a = r.length);
  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
  return n;
}

function _arrayWithoutHoles(r) {
  if (Array.isArray(r)) return _arrayLikeToArray$1(r);
}

function _iterableToArray(r) {
  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}

function _unsupportedIterableToArray$1(r, a) {
  if (r) {
    if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
    var t = {}.toString.call(r).slice(8, -1);
    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
  }
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _toConsumableArray(r) {
  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread();
}

var noop = function noop() {};
var numberToArray = function numberToArray(n) {
  return _toConsumableArray(Array(n).keys());
};
var cssPrefix = function cssPrefix() {
  var prefix = "rec";
  var space = " ";
  var result = "".concat(prefix); // initial it with global prefix;

  // in case of an array we add the class prefix per item;
  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
    classNames[_key] = arguments[_key];
  }
  var chainedClasses = classNames.reduce(function (acc, current) {
    if (current) {
      acc += "".concat(space).concat(prefix, "-").concat(current); // we must keep spaces between class names
    }
    return acc;
  }, "");
  result += chainedClasses;
  return result;
};
var pipe = function pipe() {
  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
    fns[_key2] = arguments[_key2];
  }
  return function (x) {
    return fns.reduce(function (v, f) {
      return f(v);
    }, x);
  };
};

function _taggedTemplateLiteral(e, t) {
  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
    raw: {
      value: Object.freeze(t)
    }
  }));
}

var _templateObject$7;
var Button = styled.button.attrs(function (_ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? "button" : _ref$type;
  return {
    type: type
  };
})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  font-size: 1.6em;\n  background-color: rgba(103, 58, 183, 0.1);\n  color: ", ";\n  box-shadow: 0 0 2px 0px #333;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  width: 50px;\n  height: 50px;\n  min-width: 50px;\n  line-height: 50px;\n  align-self: center;\n  cursor: pointer;\n  outline: none;\n  &:hover:enabled,\n  &:focus:enabled {\n    color: #fff;\n    background-color: rgba(103, 58, 183, 1);\n    box-shadow: 0 0 2px 0 #333;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n"])), function (props) {
  return props.$disabled ? "#999" : "#333";
});

var consts = {
  PREV: "PREV",
  NEXT: "NEXT",
  START: "flex-start",
  CENTER: "center",
  END: "flex-end"
};

var _templateObject$6;
var ItemWrapper = styled.div.attrs(function (_ref) {
  var style = _ref.style;
  return {
    style: style,
    className: cssPrefix("item-wrapper")
  };
})(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  user-select: none;\n  justify-content: ", ";\n"])), function (_ref2) {
  var $itemPosition = _ref2.$itemPosition;
  return $itemPosition;
});
ItemWrapper.defaultProps = {
  style: {},
  $itemPosition: consts.CENTER
};
ItemWrapper.propTypes = {
  children: PropTypes.element.isRequired,
  style: PropTypes.object,
  $itemPosition: PropTypes.oneOf([consts.START, consts.CENTER, consts.END])
};

var _templateObject$5;
var SliderContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  margin: 0 10px;\n"])));

var _templateObject$4;
var calcLeft = function calcLeft(_ref) {
  var $isRTL = _ref.$isRTL,
    $verticalMode = _ref.$verticalMode,
    $isSwiping = _ref.$isSwiping,
    $swipedSliderPosition = _ref.$swipedSliderPosition,
    $sliderPosition = _ref.$sliderPosition;
  if ($verticalMode || $isRTL) {
    return "auto";
  } else {
    return "".concat($isSwiping ? $swipedSliderPosition : $sliderPosition, "px");
  }
};
var calcRight = function calcRight(_ref2) {
  var $isRTL = _ref2.$isRTL,
    $verticalMode = _ref2.$verticalMode,
    $isSwiping = _ref2.$isSwiping,
    $swipedSliderPosition = _ref2.$swipedSliderPosition,
    $sliderPosition = _ref2.$sliderPosition;
  if (!$verticalMode && $isRTL) {
    return "".concat($isSwiping ? $swipedSliderPosition : $sliderPosition, "px");
  } else {
    return "auto";
  }
};
var calcTop = function calcTop(_ref3) {
  var $verticalMode = _ref3.$verticalMode,
    $isSwiping = _ref3.$isSwiping,
    $swipedSliderPosition = _ref3.$swipedSliderPosition,
    $sliderPosition = _ref3.$sliderPosition;
  if (!$verticalMode) {
    return "auto";
  } else {
    return "".concat($isSwiping ? $swipedSliderPosition : $sliderPosition, "px");
  }
};
var calcTransition = function calcTransition(_ref4) {
  var $isSwiping = _ref4.$isSwiping,
    $transitionMs = _ref4.$transitionMs,
    $easing = _ref4.$easing,
    $tiltEasing = _ref4.$tiltEasing;
  var duration = $isSwiping ? 0 : $transitionMs;
  var effectiveEasing = $isSwiping ? $tiltEasing : $easing;
  return "all ".concat(duration, "ms ").concat(effectiveEasing);
};

// We use attributes (style) to bypass multiple creation of classes (dynamic styling)
var Slider = styled.div.attrs(function (props) {
  return {
    style: {
      transition: calcTransition(props),
      left: calcLeft(props),
      right: calcRight(props),
      top: calcTop(props)
    }
  };
})(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n  ", ";\n  ", ";\n"])), function (_ref5) {
  var $verticalMode = _ref5.$verticalMode;
  return $verticalMode ? "column" : "row";
}, function (_ref6) {
  var $verticalMode = _ref6.$verticalMode;
  return $verticalMode ? "min-height: 100%;" : "";
}, function (_ref7) {
  var $verticalMode = _ref7.$verticalMode,
    $outerSpacing = _ref7.$outerSpacing;
  return $verticalMode ? "" : "margin: 0 ".concat($outerSpacing, "px;");
});

var _templateObject$3;
var StyledCarousel = styled.div.attrs(function (props) {
  var _props$size;
  return {
    style: {
      height: (_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.height
    }
  };
})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"])));

var _templateObject$2;
var CarouselWrapper = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  direction: ", ";\n"])), function (_ref) {
  var $isRTL = _ref.$isRTL;
  return $isRTL ? "rtl" : "ltr";
});

function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper$3(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$3() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct$3() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$3 = function _isNativeReflectConstruct() { return !!t; })(); }
var ItemWrapperContainer = /*#__PURE__*/function (_React$Component) {
  function ItemWrapperContainer() {
    var _this;
    _classCallCheck(this, ItemWrapperContainer);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper$3(this, ItemWrapperContainer, [].concat(args));
    _defineProperty(_this, "onClick", function () {
      var _this$props = _this.props,
        onClick = _this$props.onClick,
        id = _this$props.id;
      onClick(id);
    });
    return _this;
  }
  _inherits(ItemWrapperContainer, _React$Component);
  return _createClass(ItemWrapperContainer, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/jsx(ItemWrapper, _objectSpread$3(_objectSpread$3({}, this.props), {}, {
        onClick: this.onClick
      }));
    }
  }]);
}(React.Component);
ItemWrapperContainer.defaultProps = {
  onClick: noop,
  $itemPosition: consts.CENTER
};
ItemWrapperContainer.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onClick: PropTypes.func,
  $itemPosition: PropTypes.oneOf([consts.START, consts.CENTER, consts.END])
};

function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Track = function Track(_ref) {
  var children = _ref.children,
    childWidth = _ref.childWidth,
    autoTabIndexVisibleItems = _ref.autoTabIndexVisibleItems,
    _ref$enableSwipe = _ref.enableSwipe,
    enableSwipe = _ref$enableSwipe === void 0 ? true : _ref$enableSwipe,
    _ref$enableMouseSwipe = _ref.enableMouseSwipe,
    enableMouseSwipe = _ref$enableMouseSwipe === void 0 ? true : _ref$enableMouseSwipe,
    _ref$preventDefaultTo = _ref.preventDefaultTouchmoveEvent,
    preventDefaultTouchmoveEvent = _ref$preventDefaultTo === void 0 ? false : _ref$preventDefaultTo,
    itemsToShow = _ref.itemsToShow,
    itemsToScroll = _ref.itemsToScroll,
    currentItem = _ref.currentItem,
    _ref$itemPosition = _ref.itemPosition,
    itemPosition = _ref$itemPosition === void 0 ? consts.CENTER : _ref$itemPosition,
    _ref$itemPadding = _ref.itemPadding,
    itemPadding = _ref$itemPadding === void 0 ? [0, 0, 0, 0] : _ref$itemPadding,
    onSwiped = _ref.onSwiped,
    onSwiping = _ref.onSwiping,
    verticalMode = _ref.verticalMode,
    onItemClick = _ref.onItemClick;
  var width = "".concat(childWidth, "px");
  var paddingStyle = "".concat(itemPadding.join("px "), "px");
  var minVisibleItem = currentItem;
  var maxVisibleItem = currentItem + itemsToShow;
  var prevItem = minVisibleItem - itemsToScroll;
  var nextItem = maxVisibleItem + itemsToScroll;
  var originalChildren = React.Children.map(children, function (child, idx) {
    var isVisible = idx >= minVisibleItem && idx < maxVisibleItem;
    var isPrevItem = !isVisible && idx >= prevItem && idx < currentItem;
    var isNextItem = !isVisible && idx < nextItem && idx > currentItem;
    var itemClass = "carousel-item";
    var childToRender = autoTabIndexVisibleItems ? /*#__PURE__*/React.cloneElement(child, {
      tabIndex: isVisible ? 0 : -1
    }) : child;
    return /*#__PURE__*/jsx("div", {
      className: cssPrefix(itemClass, "".concat(itemClass, "-").concat(idx), "".concat(itemClass, "-").concat(isVisible ? "visible" : "hidden"), isPrevItem && "".concat(itemClass, "-prev"), isNextItem && "".concat(itemClass, "-next")),
      children: /*#__PURE__*/jsx(ItemWrapperContainer, {
        id: idx,
        $itemPosition: itemPosition,
        style: {
          width: width,
          padding: paddingStyle
        },
        onClick: onItemClick,
        children: childToRender
      }, idx)
    });
  });
  var swipeHandler = useSwipeable({
    stopPropagation: true,
    preventDefaultTouchmoveEvent: preventDefaultTouchmoveEvent,
    trackMouse: enableMouseSwipe,
    onSwiped: onSwiped,
    onSwiping: onSwiping
  });
  var toRender = enableSwipe ? /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2({
    style: {
      display: "flex",
      flexDirection: verticalMode ? "column" : "row"
    },
    className: cssPrefix("swipable")
  }, swipeHandler), {}, {
    children: originalChildren
  })) : originalChildren;
  return toRender;
};
Track.propTypes = {
  children: PropTypes.array.isRequired,
  itemsToShow: PropTypes.number.isRequired,
  noAutoTabbedItems: PropTypes.bool,
  currentItem: PropTypes.number.isRequired,
  itemPosition: PropTypes.string,
  itemPadding: PropTypes.array,
  childWidth: PropTypes.number,
  verticalMode: PropTypes.bool,
  enableSwipe: PropTypes.bool,
  enableMouseSwipe: PropTypes.bool,
  preventDefaultTouchmoveEvent: PropTypes.bool,
  onSwiped: PropTypes.func,
  onSwiping: PropTypes.func,
  onItemClick: PropTypes.func
};

var _excluded$1 = ["direction", "onClick", "icons", "style"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var directionIcons = {
  left: "❮",
  right: "❯",
  up: "❮",
  down: "❯"
};
var arrowClassname = cssPrefix("arrow");
var rotateStyle = function rotateStyle(direction) {
  var rotate = {};
  if (direction === Arrow.up || direction === Arrow.down) {
    rotate.transform = "rotate(90deg)";
  }
  return rotate;
};
var Arrow = function Arrow(_ref) {
  var direction = _ref.direction,
    onClick = _ref.onClick,
    icons = _ref.icons,
    style = _ref.style,
    rest = _objectWithoutProperties(_ref, _excluded$1);
  var arrows = _objectSpread$1(_objectSpread$1({}, directionIcons), icons);
  var styleObj = _objectSpread$1(_objectSpread$1({}, rotateStyle(direction)), style);
  return /*#__PURE__*/jsx(Button, _objectSpread$1(_objectSpread$1({
    tabIndex: 0,
    onClick: onClick,
    className: cx(arrowClassname, "".concat(arrowClassname, "-").concat(direction)),
    style: styleObj
  }, rest), {}, {
    children: arrows[direction]
  }));
};
Arrow.left = "left";
Arrow.right = "right";
Arrow.up = "up";
Arrow.down = "down";
Arrow.propTypes = {
  direction: PropTypes.oneOf(["left", "right", "up", "down"]).isRequired,
  icons: PropTypes.object,
  style: PropTypes.object,
  onClick: PropTypes.func
};

var NEXT_ITEM = "NEXT_ITEM";
var PREV_ITEM = "PREV_ITEM";

var activeIndexReducer = function activeIndexReducer(state, action) {
  var limit = action.limit,
    itemsToScroll = action.itemsToScroll,
    type = action.type;
  switch (type) {
    case NEXT_ITEM:
      {
        var optimisticNextItem = state + itemsToScroll;
        var nextItem = limit >= optimisticNextItem ? optimisticNextItem : limit;
        return nextItem;
      }
    case PREV_ITEM:
      {
        var optimisticPrevItem = state - itemsToScroll;
        var prevItem = optimisticPrevItem >= limit ? optimisticPrevItem : limit;
        return prevItem;
      }
    default:
      return state;
  }
};

var nextItemAction = function nextItemAction(limit, itemsToScroll) {
  return {
    type: NEXT_ITEM,
    limit: limit,
    itemsToScroll: itemsToScroll
  };
};
var prevItemAction = function prevItemAction(limit, itemsToScroll) {
  return {
    type: PREV_ITEM,
    limit: limit,
    itemsToScroll: itemsToScroll
  };
};

var _templateObject$1;
function _callSuper$2(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$2() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function _isNativeReflectConstruct() { return !!t; })(); }
var boxShadow = "0 0 1px 2px rgba(0, 0, 0, 0.5)";
var activeBoxShadow = "0 0 1px 3px rgba(103,58,183,1)";
var hoveredBoxShadow = "0 0 1px 3px rgba(103,58,183,.5)";
var Dot = styled.button.attrs(function (_ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? "button" : _ref$type;
  return {
    type: type
  };
})(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  padding: 0;\n  transition: all 250ms ease;\n  border: none;\n  margin: 5px;\n  background-color: ", ";\n  font-size: 1.3em;\n  content: \"\";\n  height: 10px;\n  width: 10px;\n  box-shadow: ", ";\n  border-radius: 50%;\n  outline: none;\n  &:hover,\n  &:focus {\n    cursor: pointer;\n    box-shadow: ", ";\n  }\n"])), function (_ref2) {
  var $active = _ref2.$active;
  return $active ? "rgba(103,58,183,.5)" : "transparent";
}, function (_ref3) {
  var $active = _ref3.$active;
  return $active ? activeBoxShadow : boxShadow;
}, function (_ref4) {
  var $active = _ref4.$active;
  return $active ? activeBoxShadow : hoveredBoxShadow;
});
var DotContainer = /*#__PURE__*/function (_React$Component) {
  function DotContainer() {
    var _this;
    _classCallCheck(this, DotContainer);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper$2(this, DotContainer, [].concat(args));
    _defineProperty(_this, "onClick", function () {
      var _this$props = _this.props,
        onClick = _this$props.onClick,
        id = _this$props.id;
      onClick(id);
    });
    return _this;
  }
  _inherits(DotContainer, _React$Component);
  return _createClass(DotContainer, [{
    key: "render",
    value: function render() {
      var active = this.props.active;
      return /*#__PURE__*/jsx(Dot, {
        tabIndex: active ? -1 : 0,
        onClick: this.onClick,
        $active: active,
        className: "".concat(cssPrefix("dot"), " ").concat(active ? cssPrefix("dot_active") : "")
      });
    }
  }]);
}(React.Component);
DotContainer.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  active: PropTypes.bool,
  onClick: PropTypes.func
};

var _templateObject;
function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
var Indicators = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 15px;\n"])));
var Pagination = /*#__PURE__*/function (_React$Component) {
  function Pagination() {
    _classCallCheck(this, Pagination);
    return _callSuper$1(this, Pagination, arguments);
  }
  _inherits(Pagination, _React$Component);
  return _createClass(Pagination, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        numOfPages = _this$props.numOfPages,
        activePage = _this$props.activePage,
        onClick = _this$props.onClick;
      var pages = numberToArray(numOfPages);
      return /*#__PURE__*/jsx(Indicators, {
        className: cssPrefix("pagination"),
        children: pages.map(function (item, i) {
          return /*#__PURE__*/jsx(DotContainer, {
            id: i,
            active: i === activePage,
            onClick: onClick
          }, i);
        })
      });
    }
  }]);
}(React.Component);
Pagination.defaultProps = {
  onClick: noop
};
Pagination.propTypes = {
  numOfPages: PropTypes.number.isRequired,
  activePage: PropTypes.number.isRequired,
  onClick: PropTypes.func
};

var _excluded = ["breakPoints"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var Carousel = /*#__PURE__*/function (_React$Component) {
  function Carousel() {
    var _this;
    _classCallCheck(this, Carousel);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, Carousel, [].concat(args));
    _defineProperty(_this, "isComponentMounted", false);
    _defineProperty(_this, "state", {
      rootHeight: 0,
      childHeight: 0,
      sliderPosition: 0,
      swipedSliderPosition: 0,
      isSwiping: false,
      transitioning: false,
      transitionMs: _this.props.transitionMs,
      activeIndex: _this.props.initialActiveIndex || _this.props.initialFirstItem,
      // support deprecated  initialFirstItem
      pages: [],
      activePage: 0,
      sliderContainerWidth: 0
    });
    _defineProperty(_this, "setRef", function (name) {
      return function (ref) {
        return _this[name] = ref;
      };
    });
    _defineProperty(_this, "initResizeObserver", function () {
      _this.ro = new ResizeObserver(function (entries, observer) {
        var _iterator = _createForOfIteratorHelper(entries),
          _step;
        try {
          var _loop = function _loop() {
            var entry = _step.value;
            if (entry.target === _this.sliderContainer) {
              // we are using rAF because it fixes the infinite refresh with gatsby (ssr?).
              // TBH, I'm not sure i fully understand why.
              // see https://github.com/sag1v/react-elastic-carousel/issues/107
              window.requestAnimationFrame(function () {
                _this.onContainerResize(entry);
              });
            }
            if (entry.target === _this.slider) {
              // we are using rAF because it fixes the infinite refresh with gatsby (ssr?).
              // TBH, I'm not sure i fully understand why
              // see https://github.com/sag1v/react-elastic-carousel/issues/107
              window.requestAnimationFrame(function () {
                _this.onSliderResize(entry);
              });
            }
          };
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            _loop();
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
      });
      _this.ro.observe(_this.sliderContainer);
      _this.ro.observe(_this.slider);
    });
    _defineProperty(_this, "unSubscribeObserver", function () {
      return _this.ro.disconnect();
    });
    _defineProperty(_this, "setAutoPlay", function () {
      var _this$getDerivedProps = _this.getDerivedPropsFromBreakPoint(),
        autoPlaySpeed = _this$getDerivedProps.autoPlaySpeed;
      _this.autoPlayIntervalId = setInterval(function () {
        if (_this.isComponentMounted) {
          var transitioning = _this.state.transitioning;
          if (!transitioning) {
            _this.slideNext();
          }
        }
      }, autoPlaySpeed);
    });
    _defineProperty(_this, "removeAutoPlay", function () {
      if (_this.autoPlayIntervalId) {
        clearInterval(_this.autoPlayIntervalId);
        _this.autoPlayIntervalId = null;
      }
    });
    _defineProperty(_this, "setPages", function () {
      var numOfPages = _this.getNumOfPages();
      var pages = numberToArray(numOfPages);
      _this.setState({
        pages: pages
      });
    });
    _defineProperty(_this, "onSliderTransitionEnd", function (fn) {
      _this.slider.addEventListener("transitionend", fn);
    });
    _defineProperty(_this, "removeSliderTransitionHook", function (fn) {
      _this.slider.removeEventListener("transitionend", fn);
    });
    _defineProperty(_this, "getDerivedPropsFromBreakPoint", function () {
      var _this$props = _this.props,
        breakPoints = _this$props.breakPoints,
        restOfProps = _objectWithoutProperties(_this$props, _excluded);
      var sliderContainerWidth = _this.state.sliderContainerWidth;

      // default breakpoint from individual props
      var currentBreakPoint;
      // if breakpoints were added as props override the individual props
      if (breakPoints && breakPoints.length > 0) {
        currentBreakPoint = breakPoints.slice() // no mutations
        .reverse() // so we can find last match
        .find(function (bp) {
          return bp.width <= sliderContainerWidth;
        });
        if (!currentBreakPoint) {
          /* in case we don't have a lower width than sliderContainerWidth
           * this mostly happens in initilization when sliderContainerWidth is 0
           */
          currentBreakPoint = breakPoints[0];
        }
      }
      // merge direct props with current breakpoint Props
      return _objectSpread(_objectSpread({}, restOfProps), currentBreakPoint);
    });
    _defineProperty(_this, "updateSliderPosition", function () {
      _this.setState(function (state) {
        var _this$getDerivedProps2 = _this.getDerivedPropsFromBreakPoint(),
          children = _this$getDerivedProps2.children,
          verticalMode = _this$getDerivedProps2.verticalMode,
          itemsToShow = _this$getDerivedProps2.itemsToShow,
          transitionMs = _this$getDerivedProps2.transitionMs;
        var childHeight = state.childHeight,
          activeIndex = state.activeIndex;
        var childWidth = _this.calculateChildWidth();
        var totalItems = Children.toArray(children).length;
        var hiddenSlots = totalItems - itemsToShow;
        var moveBy = activeIndex * -1;
        var emptySlots = itemsToShow - (totalItems - activeIndex);
        if (emptySlots > 0 && hiddenSlots > 0) {
          moveBy = emptySlots + activeIndex * -1;
        }
        var sliderPosition = (verticalMode ? childHeight : childWidth) * moveBy;
        var newActiveIndex = emptySlots > 0 ? activeIndex - emptySlots : activeIndex;
        // go back from 0ms to whatever set by the user
        // We were at 0ms because we wanted to disable animation on resize
        // see https://github.com/sag1v/react-elastic-carousel/issues/94
        window.requestAnimationFrame(function () {
          if (_this.isComponentMounted) {
            _this.setState({
              transitionMs: transitionMs
            });
          }
        });
        return {
          sliderPosition: sliderPosition,
          activeIndex: newActiveIndex < 0 ? 0 : newActiveIndex
        };
      });
    });
    _defineProperty(_this, "onSliderResize", function (sliderNode) {
      if (!_this.isComponentMounted) {
        return;
      }
      var _this$getDerivedProps3 = _this.getDerivedPropsFromBreakPoint(),
        verticalMode = _this$getDerivedProps3.verticalMode,
        children = _this$getDerivedProps3.children,
        itemsToShow = _this$getDerivedProps3.itemsToShow;
      var sliderHeight = sliderNode.contentRect.height;
      var nextState = {};
      var childrenLength = Children.toArray(children).length;
      if (verticalMode) {
        var childHeight = sliderHeight / childrenLength;
        // We use Math.min because we don't want to make the child smaller
        // if the number of children is smaller than itemsToShow.
        // (Because we do not want "empty slots")
        nextState.rootHeight = childHeight * Math.min(childrenLength, itemsToShow);
        nextState.childHeight = childHeight;
      } else {
        nextState.rootHeight = sliderHeight;
      }
      _this.setState(nextState);
    });
    _defineProperty(_this, "calculateChildWidth", function () {
      var sliderContainerWidth = _this.state.sliderContainerWidth;
      var _this$getDerivedProps4 = _this.getDerivedPropsFromBreakPoint(),
        verticalMode = _this$getDerivedProps4.verticalMode,
        itemsToShow = _this$getDerivedProps4.itemsToShow,
        showEmptySlots = _this$getDerivedProps4.showEmptySlots,
        children = _this$getDerivedProps4.children;

      /* based on slider container's width, get num of items to show
          * and calculate child's width (and update it in state)
          */
      var childrenLength = Children.toArray(children).length || 1;
      var childWidth = 0;
      if (verticalMode) {
        childWidth = sliderContainerWidth;
      } else {
        // When "showEmptySlots" is false
        // We use Math.min because we don't want to make the child smaller
        // if the number of children is smaller than itemsToShow.
        // (Because we do not want "empty slots")
        childWidth = sliderContainerWidth / (showEmptySlots ? itemsToShow : Math.min(childrenLength, itemsToShow));
      }
      return childWidth;
    });
    _defineProperty(_this, "onContainerResize", function (sliderContainerNode) {
      var newSliderContainerWidth = sliderContainerNode.contentRect.width;
      // update slider container width
      // disable animation on resize see https://github.com/sag1v/react-elastic-carousel/issues/94
      var _this$getDerivedProps5 = _this.getDerivedPropsFromBreakPoint(),
        outerSpacing = _this$getDerivedProps5.outerSpacing,
        initialVerticalMode = _this$getDerivedProps5.verticalMode;
      var containerWidth = newSliderContainerWidth - (initialVerticalMode ? 0 : outerSpacing * 2);
      if (!_this.isComponentMounted || _this.state.sliderContainerWidth === newSliderContainerWidth) {
        // prevent infinite loop
        return;
      }
      _this.setState({
        sliderContainerWidth: containerWidth,
        transitionMs: 0
      }, function () {
        // we must get these props inside setState (get future props because its async)
        var _this$getDerivedProps6 = _this.getDerivedPropsFromBreakPoint(),
          onResize = _this$getDerivedProps6.onResize,
          itemsToShow = _this$getDerivedProps6.itemsToShow,
          children = _this$getDerivedProps6.children;
        var childrenLength = Children.toArray(children).length || 1;
        _this.setState(function (currentState) {
          // We might need to change the selected index when the size of the container changes
          // we are making sure the selected index is not out of boundaries and respecting itemsToShow
          // This usually happens with breakpoints. see https://github.com/sag1v/react-elastic-carousel/issues/122
          var activeIndex = currentState.activeIndex;
          // we take the lowest, in case itemsToShow is greater than childrenLength
          var maxItemsToShow = Math.min(childrenLength, itemsToShow);
          var endLimit = childrenLength - maxItemsToShow;
          if (activeIndex > endLimit) {
            activeIndex = endLimit;
          }
          return {
            activeIndex: activeIndex
          };
        }, function () {
          /* Based on all of the above new data:
          * update slider position
          * get the new current breakpoint
          * pass the current breakpoint to the consumer's callback
          */
          _this.updateSliderPosition();
          var currentBreakPoint = _this.getDerivedPropsFromBreakPoint();
          onResize(currentBreakPoint);
        });
      });
    });
    _defineProperty(_this, "tiltMovement", function (position) {
      var distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
      var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 150;
      _this.setState(function (state) {
        return {
          isSwiping: true,
          swipedSliderPosition: position - distance
        };
      });
      setTimeout(function () {
        _this.setState({
          isSwiping: false,
          swipedSliderPosition: 0
        });
      }, duration);
    });
    _defineProperty(_this, "convertChildToCbObj", function (index) {
      var _this$getDerivedProps7 = _this.getDerivedPropsFromBreakPoint(),
        children = _this$getDerivedProps7.children;
      // support decimal itemsToShow
      var roundedIdx = Math.round(index);
      var child = Children.toArray(children)[roundedIdx];
      return {
        item: child.props,
        index: roundedIdx
      };
    });
    _defineProperty(_this, "getNextItemIndex", function (currentIndex, getPrev) {
      var _this$getDerivedProps8 = _this.getDerivedPropsFromBreakPoint(),
        children = _this$getDerivedProps8.children,
        itemsToShow = _this$getDerivedProps8.itemsToShow,
        itemsToScroll = _this$getDerivedProps8.itemsToScroll;
      var childrenLength = Children.toArray(children).length || 1;
      var notEnoughItemsToShow = itemsToShow > childrenLength;
      var limit = getPrev ? 0 : childrenLength - itemsToShow;
      if (notEnoughItemsToShow) {
        limit = 0; // basically don't move
      }
      var nextAction = getPrev ? prevItemAction(0, itemsToScroll) : nextItemAction(limit, itemsToScroll);
      var nextItem = activeIndexReducer(currentIndex, nextAction);
      return nextItem;
    });
    _defineProperty(_this, "getNextItemObj", function (getPrev) {
      var _this$getDerivedProps9 = _this.getDerivedPropsFromBreakPoint(),
        children = _this$getDerivedProps9.children;
      var activeIndex = _this.state.activeIndex;
      var nextItemIndex = _this.getNextItemIndex(activeIndex, getPrev);
      // support decimal itemsToShow
      var roundedIdx = Math.round(nextItemIndex);
      var asElement = Children.toArray(children)[roundedIdx];
      var asObj = {
        item: asElement.props,
        index: roundedIdx
      };
      return asObj;
    });
    _defineProperty(_this, "resetSwipe", function () {
      _this.setState({
        swipedSliderPosition: 0,
        transitioning: false,
        isSwiping: false
      });
    });
    _defineProperty(_this, "onSwiping", function (data) {
      var deltaX = data.deltaX,
        absX = data.absX,
        deltaY = data.deltaY,
        absY = data.absY,
        dir = data.dir;
      _this.setState(function (state) {
        var childHeight = state.childHeight,
          activeIndex = state.activeIndex,
          sliderPosition = state.sliderPosition;
        var _this$getDerivedProps10 = _this.getDerivedPropsFromBreakPoint(),
          itemsToShow = _this$getDerivedProps10.itemsToShow,
          verticalMode = _this$getDerivedProps10.verticalMode,
          children = _this$getDerivedProps10.children,
          isRTL = _this$getDerivedProps10.isRTL;
        var childWidth = _this.calculateChildWidth();

        // determine how far can user swipe
        var childrenLength = Children.toArray(children).length || 1;
        var goingNext = !verticalMode && dir === "Left" && !isRTL || !verticalMode && dir === "Right" && isRTL || verticalMode && dir === "Up";
        var goingBack = !verticalMode && dir === "Right" && !isRTL || !verticalMode && dir === "Left" && isRTL || verticalMode && dir === "Down";
        var horizontalSwipe = dir === "Left" || dir === "Right";
        var verticalSwipe = dir === "Up" || dir === "Down";
        var horizontalMode = !verticalMode;
        var distanceSwipe = 0;
        var horizontalEdgeStoppage = childWidth / 2;
        var verticalEdgeStoppage = childHeight / 2;
        if (verticalMode) {
          if (verticalSwipe) {
            var trackSize = childrenLength * childHeight;
            if (goingNext) {
              distanceSwipe = trackSize - childHeight * activeIndex - itemsToShow * childHeight + verticalEdgeStoppage;
            } else if (goingBack) {
              distanceSwipe = childHeight * activeIndex + verticalEdgeStoppage;
            }
          }
        } else {
          if (horizontalSwipe) {
            var _trackSize = childrenLength * childWidth;
            if (goingNext) {
              distanceSwipe = _trackSize - childWidth * activeIndex - itemsToShow * childWidth + horizontalEdgeStoppage;
            } else if (goingBack) {
              distanceSwipe = childWidth * activeIndex + horizontalEdgeStoppage;
            }
          }
        }
        var shouldHorizontalSkipUpdate = horizontalMode && verticalSwipe || horizontalMode && horizontalSwipe && absX > distanceSwipe;
        var shouldVerticalSkipUpdate = verticalMode && horizontalSwipe || verticalMode && verticalSwipe && absY > distanceSwipe;
        if (shouldHorizontalSkipUpdate || shouldVerticalSkipUpdate) {
          // bail out of state update
          return;
        }
        var swipedSliderPosition;
        if (horizontalSwipe) {
          if (isRTL) {
            swipedSliderPosition = sliderPosition - deltaX;
          } else {
            swipedSliderPosition = sliderPosition + deltaX;
          }
        } else {
          swipedSliderPosition = sliderPosition + deltaY;
        }
        return {
          swipedSliderPosition: swipedSliderPosition,
          isSwiping: true,
          transitioning: true
        };
      });
    });
    _defineProperty(_this, "onSwiped", function (data) {
      // we need to handle all scenarios:
      // 1. Horizontal mode - swipe left or right
      // 2. Horizontal mode with RTL - swipe left or right
      // 3. vertical mode - swipe up or down

      var absX = data.absX,
        absY = data.absY,
        dir = data.dir;
      var _this$state = _this.state,
        childHeight = _this$state.childHeight,
        activeIndex = _this$state.activeIndex;
      var _this$getDerivedProps11 = _this.getDerivedPropsFromBreakPoint(),
        verticalMode = _this$getDerivedProps11.verticalMode,
        isRTL = _this$getDerivedProps11.isRTL,
        itemsToScroll = _this$getDerivedProps11.itemsToScroll;
      var childWidth = _this.calculateChildWidth();
      var func = _this.resetSwipe;
      var minSwipeDistanceHorizontal = childWidth / 5;
      var minSwipeDistanceVertical = childHeight / 5;
      var swipedLeft = dir === "Left";
      var swipedRight = dir === "Right";
      var swipedUp = dir === "Up";
      var swipedDown = dir === "Down";
      var verticalGoSwipe = verticalMode && (swipedUp || swipedDown) && absY > minSwipeDistanceVertical;
      var horizontalGoSwipe = !verticalMode && (swipedRight || swipedLeft) && absX > minSwipeDistanceHorizontal;
      var goodToGo = false;
      if (verticalGoSwipe || horizontalGoSwipe) {
        goodToGo = true;
      }
      if (goodToGo) {
        // we should go to a different item
        // determine what method we need to invoke

        if (verticalMode) {
          // get number of slides from user's swiping
          var numberOfSlidesViaSwipe = Math.ceil((absY - minSwipeDistanceVertical) / childHeight);
          // if user swipes more than itemsToScroll then we want to bypass itemsToScroll for a smoother scroll
          var numberOfSlidesTogo = Math.max(itemsToScroll, numberOfSlidesViaSwipe);
          var backSlidesToGo = activeIndex - numberOfSlidesTogo;
          var forwardSlideTtoGo = activeIndex + numberOfSlidesTogo;

          // up or down
          if (swipedDown) {
            // func = this.onPrevStart;
            func = function func() {
              return _this.goTo(backSlidesToGo);
            };
          }
          if (swipedUp) {
            // func = this.onNextStart;
            func = function func() {
              return _this.goTo(forwardSlideTtoGo);
            };
          }
        } else {
          // get number of slides from user's swiping
          var _numberOfSlidesViaSwipe = Math.ceil((absX - minSwipeDistanceHorizontal) / childWidth);
          // if user swipes more than itemsToScroll then we want to bypass itemsToScroll for a smoother scroll
          var _numberOfSlidesTogo = Math.max(itemsToScroll, _numberOfSlidesViaSwipe);
          var _backSlidesToGo = activeIndex - _numberOfSlidesTogo;
          var _forwardSlideTtoGo = activeIndex + _numberOfSlidesTogo;

          // horizontal mode
          if (isRTL) {
            // flip sides
            if (swipedLeft) {
              // func = this.onPrevStart;
              func = function func() {
                return _this.goTo(_backSlidesToGo);
              };
            }
            if (swipedRight) {
              // func = this.onNextStart;
              func = function func() {
                return _this.goTo(_forwardSlideTtoGo);
              };
            }
          } else {
            // normal behavior
            if (swipedLeft) {
              // func = this.onNextStart;
              func = function func() {
                return _this.goTo(_forwardSlideTtoGo);
              };
            }
            if (swipedRight) {
              // func = this.onPrevStart;
              func = function func() {
                return _this.goTo(_backSlidesToGo);
              };
            }
          }
        }
      }
      // we are not "tilting" on edges, so we need to reset isSwiping and transitioning.
      // otherwise we wont slide back to edge
      _this.setState({
        isSwiping: false,
        transitioning: false
      });
      func({
        skipTilt: true
      });
    });
    _defineProperty(_this, "onNextStart", function (options) {
      var _this$getDerivedProps12 = _this.getDerivedPropsFromBreakPoint(),
        onNextStart = _this$getDerivedProps12.onNextStart;
      var activeIndex = _this.state.activeIndex;
      var nextItemObj = _this.getNextItemObj();
      var prevItemObj = _this.convertChildToCbObj(activeIndex);
      onNextStart(prevItemObj, nextItemObj);
      _this.slideNext(options);
    });
    _defineProperty(_this, "onPrevStart", function (options) {
      var _this$getDerivedProps13 = _this.getDerivedPropsFromBreakPoint(),
        onPrevStart = _this$getDerivedProps13.onPrevStart;
      var activeIndex = _this.state.activeIndex;
      var nextItemObj = _this.getNextItemObj(true);
      var prevItemObj = _this.convertChildToCbObj(activeIndex);
      onPrevStart(prevItemObj, nextItemObj);
      _this.slidePrev(options);
    });
    _defineProperty(_this, "slideNext", function () {
      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var skipTilt = options.skipTilt;
      var _this$getDerivedProps14 = _this.getDerivedPropsFromBreakPoint(),
        enableTilt = _this$getDerivedProps14.enableTilt;
      var _this$state2 = _this.state,
        activeIndex = _this$state2.activeIndex,
        sliderPosition = _this$state2.sliderPosition;
      var nextItem = _this.getNextItemIndex(activeIndex, false);
      if (activeIndex !== nextItem) {
        _this.goTo(nextItem);
      } else if (enableTilt && !skipTilt) {
        _this.tiltMovement(sliderPosition, 20, 150);
      }
    });
    _defineProperty(_this, "slidePrev", function () {
      var options = arguments.length > 0 && arguments[0] !== undef