react-slideshow-image 2.0.1 → 3.0.2

package/dist/styles.css

@@ -1 +1 @@
-.react-slideshow-container{display:flex;align-items:center}.react-slideshow-container .nav{height:30px;background:rgba(255,255,255,0.6);width:30px;z-index:10;text-align:center;cursor:pointer;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.react-slideshow-container .nav span{display:block;width:10px;height:10px;border-color:#000;border-style:solid;transform:rotate(45deg)}.react-slideshow-container .nav.disabled span{border-color:#666}.react-slideshow-container .nav:hover{background:white;color:#666}.react-slideshow-container .nav.disabled:hover{cursor:not-allowed}.react-slideshow-container .nav:first-of-type{margin-right:-30px;border-right:0;border-top:0}.react-slideshow-container .nav:first-of-type span{margin-left:5px;border-right:0;border-top:0}.react-slideshow-container .nav:last-of-type{margin-left:-30px}.react-slideshow-container .nav:last-of-type span{margin-right:5px;border-left:0;border-bottom:0}.react-slideshow-container+div.indicators{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px}.react-slideshow-container+div.indicators>.each-slideshow-indicator{width:7px;height:7px;margin:0 5px 10px;border-radius:50%;background:#ccc;cursor:pointer}.react-slideshow-container+div.indicators>.each-slideshow-indicator:hover{background:#666}.react-slideshow-container+div.indicators>.each-slideshow-indicator.active{background:#000}.react-slideshow-fade-wrapper{width:100%;overflow:hidden}.react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap{display:flex;flex-wrap:wrap}.react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap>div{position:relative;opacity:0}.react-slideshow-wrapper.slide{width:100%;overflow:hidden}.react-slideshow-wrapper .images-wrap{display:flex;flex-wrap:wrap}.react-slideshow-zoom-wrapper{width:100%;overflow:hidden}.react-slideshow-zoom-wrapper .zoom-wrapper{display:flex;flex-wrap:wrap;overflow:hidden}.react-slideshow-zoom-wrapper .zoom-wrapper>div{position:relative;display:flex}
+.react-slideshow-container{display:flex;align-items:center}.react-slideshow-container .nav{z-index:10}.react-slideshow-container .default-nav{height:30px;background:rgba(255,255,255,0.6);width:30px;border:0;text-align:center;cursor:pointer;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.react-slideshow-container .default-nav span{display:block;width:10px;height:10px;border-color:#000;border-style:solid;transform:rotate(45deg)}.react-slideshow-container .default-nav.disabled span{border-color:#666}.react-slideshow-container .default-nav:hover,.react-slideshow-container .default-nav:focus{background:#fff;color:#666;outline:0}.react-slideshow-container .default-nav.disabled:hover{cursor:not-allowed}.react-slideshow-container .default-nav:first-of-type{margin-right:-30px;border-right:0;border-top:0}.react-slideshow-container .default-nav:first-of-type span{margin-left:5px;border-right:0;border-top:0}.react-slideshow-container .default-nav:last-of-type{margin-left:-30px}.react-slideshow-container .default-nav:last-of-type span{margin-right:5px;border-left:0;border-bottom:0}.react-slideshow-container+div.indicators{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px}.react-slideshow-container+div.indicators li{display:inline-block;position:relative;width:7px;height:7px;padding:5px;margin:0}.react-slideshow-container+div.indicators .each-slideshow-indicator{border:0;opacity:.25;cursor:pointer;background:transparent;color:transparent}.react-slideshow-container+div.indicators .each-slideshow-indicator:before{position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;content:'';background:#000;text-align:center}.react-slideshow-container+div.indicators .each-slideshow-indicator:hover,.react-slideshow-container+div.indicators .each-slideshow-indicator.active,.react-slideshow-container+div.indicators .each-slideshow-indicator:focus{opacity:.75;outline:0}.react-slideshow-fade-wrapper{width:100%;overflow:hidden}.react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap{display:flex;flex-wrap:wrap}.react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap>div{position:relative;opacity:0}.react-slideshow-wrapper.slide{width:100%;overflow:hidden}.react-slideshow-wrapper .images-wrap{display:flex;flex-wrap:wrap}.react-slideshow-zoom-wrapper{width:100%;overflow:hidden}.react-slideshow-zoom-wrapper .zoom-wrapper{display:flex;flex-wrap:wrap;overflow:hidden}.react-slideshow-zoom-wrapper .zoom-wrapper>div{position:relative;display:flex}

package/lib/css/styles.css

@@ -4,10 +4,14 @@
 }
 
 .react-slideshow-container .nav {
+  z-index: 10;
+}
+
+.react-slideshow-container .default-nav {
   height: 30px;
   background: rgba(255, 255, 255, 0.6);
   width: 30px;
-  z-index: 10;
+  border: none;
   text-align: center;
   cursor: pointer;
   color: #fff;
@@ -17,7 +21,7 @@
   justify-content: center;
 }
 
-.react-slideshow-container .nav span {
+.react-slideshow-container .default-nav span {
   display: block;
   width: 10px;
   height: 10px;
@@ -26,36 +30,38 @@
   transform: rotate(45deg);
 }
 
-.react-slideshow-container .nav.disabled span {
+.react-slideshow-container .default-nav.disabled span {
   border-color: #666;
 }
 
-.react-slideshow-container .nav:hover {
-  background: white;
+.react-slideshow-container .default-nav:hover,
+.react-slideshow-container .default-nav:focus {
+  background: #fff;
   color: #666;
+  outline: none;
 }
 
-.react-slideshow-container .nav.disabled:hover {
+.react-slideshow-container .default-nav.disabled:hover {
   cursor: not-allowed;
 }
 
-.react-slideshow-container .nav:first-of-type {
+.react-slideshow-container .default-nav:first-of-type {
   margin-right: -30px;
   border-right: none;
   border-top: none;
 }
 
-.react-slideshow-container .nav:first-of-type span {
+.react-slideshow-container .default-nav:first-of-type span {
   margin-left: 5px;
   border-right: none;
   border-top: none;
 }
 
-.react-slideshow-container .nav:last-of-type {
+.react-slideshow-container .default-nav:last-of-type {
   margin-left: -30px;
 }
 
-.react-slideshow-container .nav:last-of-type span {
+.react-slideshow-container .default-nav:last-of-type span {
   margin-right: 5px;
   border-left: none;
   border-bottom: none;
@@ -68,21 +74,40 @@
   margin-top: 20px;
 }
 
-.react-slideshow-container + div.indicators > .each-slideshow-indicator {
+.react-slideshow-container + div.indicators li {
+  display: inline-block;
+  position: relative;
   width: 7px;
   height: 7px;
-  margin: 0 5px 10px;
-  border-radius: 50%;
-  background: #ccc;
-  cursor: pointer;
+  padding: 5px;
+  margin: 0;
 }
 
-.react-slideshow-container + div.indicators > .each-slideshow-indicator:hover {
-  background: #666;
+.react-slideshow-container + div.indicators .each-slideshow-indicator {
+  border: none;
+  opacity: 0.25;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
 }
 
-.react-slideshow-container + div.indicators > .each-slideshow-indicator.active {
+.react-slideshow-container + div.indicators .each-slideshow-indicator:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  content: '';
   background: #000;
+  text-align: center;
+}
+
+.react-slideshow-container + div.indicators .each-slideshow-indicator:hover,
+.react-slideshow-container + div.indicators .each-slideshow-indicator.active,
+.react-slideshow-container + div.indicators .each-slideshow-indicator:focus {
+  opacity: 0.75;
+  outline: none;
 }
 
 .react-slideshow-fade-wrapper {

package/lib/fade.js

@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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"); } }
 
 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); } }
@@ -235,85 +237,31 @@ function (_Component) {
         this.goNext();
       }
     }
-  }, {
-    key: "showIndicators",
-    value: function showIndicators() {
-      var _this5 = this;
-
-      var isCustomIndicator = typeof this.props.indicators !== 'boolean';
-      var className = !isCustomIndicator && 'each-slideshow-indicator';
-      return _react["default"].createElement("div", {
-        className: "indicators"
-      }, this.props.children.map(function (each, key) {
-        return _react["default"].createElement("div", {
-          key: key,
-          "data-key": key,
-          className: "".concat(className, " ").concat(_this5.state.index === key && 'active'),
-          onClick: _this5.navigate
-        }, isCustomIndicator && _this5.props.indicators(key));
-      }));
-    }
-  }, {
-    key: "showPreviousArrow",
-    value: function showPreviousArrow() {
-      var _this$props5 = this.props,
-          arrows = _this$props5.arrows,
-          prevArrow = _this$props5.prevArrow,
-          infinite = _this$props5.infinite;
-      var className = '';
-
-      if (!prevArrow) {
-        className = "nav ".concat(this.state.index <= 0 && !infinite && 'disabled');
-      }
-
-      return arrows && _react["default"].createElement("div", {
-        className: className,
-        "data-type": "prev",
-        onClick: this.preFade
-      }, prevArrow ? prevArrow : _react["default"].createElement("span", null));
-    }
-  }, {
-    key: "showNextArrow",
-    value: function showNextArrow() {
-      var _this$props6 = this.props,
-          arrows = _this$props6.arrows,
-          nextArrow = _this$props6.nextArrow,
-          infinite = _this$props6.infinite,
-          children = _this$props6.children;
-      var className = '';
-
-      if (!nextArrow) {
-        className = "nav ".concat(this.state.index === children.length - 1 && !infinite && 'disabled');
-      }
-
-      return arrows && _react["default"].createElement("div", {
-        className: className,
-        "data-type": "next",
-        onClick: this.preFade
-      }, nextArrow ? nextArrow : _react["default"].createElement("span", null));
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this5 = this;
 
-      var _this$props7 = this.props,
-          indicators = _this$props7.indicators,
-          children = _this$props7.children;
+      var _this$props5 = this.props,
+          indicators = _this$props5.indicators,
+          children = _this$props5.children,
+          arrows = _this$props5.arrows;
       var index = this.state.index;
       var unhandledProps = (0, _helpers.getUnhandledProps)(Fade.propTypes, this.props);
-      return _react["default"].createElement("div", unhandledProps, _react["default"].createElement("div", {
+      return _react["default"].createElement("div", _extends({
+        "aria-roledescription": "carousel"
+      }, unhandledProps), _react["default"].createElement("div", {
         className: "react-slideshow-container",
         onMouseEnter: this.pauseSlides,
         onMouseLeave: this.startSlides,
         ref: this.reactSlideshowWrapper
-      }, this.showPreviousArrow(), _react["default"].createElement("div", {
+      }, arrows && (0, _helpers.showPreviousArrow)(this.props, this.state.index, this.preFade), _react["default"].createElement("div", {
         className: "react-slideshow-fade-wrapper",
         ref: this.wrapper
       }, _react["default"].createElement("div", {
         className: "react-slideshow-fade-images-wrap",
         ref: function ref(wrap) {
-          return _this6.divsContainer = wrap;
+          return _this5.divsContainer = wrap;
         }
       }, children.map(function (each, key) {
         return _react["default"].createElement("div", {
@@ -322,23 +270,25 @@ function (_Component) {
             zIndex: key === index ? '1' : '0'
           },
           "data-index": key,
-          key: key
+          key: key,
+          "aria-roledescription": "slide",
+          "aria-hidden": key === index ? 'false' : 'true'
         }, each);
-      }))), this.showNextArrow()), indicators && this.showIndicators());
+      }))), arrows && (0, _helpers.showNextArrow)(this.props, this.state.index, this.preFade)), indicators && (0, _helpers.showIndicators)(this.props, this.state.index, this.navigate));
     }
   }, {
     key: "fadeImages",
     value: function fadeImages(newIndex) {
-      var _this7 = this;
+      var _this6 = this;
 
       var index = this.state.index;
-      var _this$props8 = this.props,
-          autoplay = _this$props8.autoplay,
-          children = _this$props8.children,
-          infinite = _this$props8.infinite,
-          duration = _this$props8.duration,
-          transitionDuration = _this$props8.transitionDuration,
-          onChange = _this$props8.onChange;
+      var _this$props6 = this.props,
+          autoplay = _this$props6.autoplay,
+          children = _this$props6.children,
+          infinite = _this$props6.infinite,
+          duration = _this$props6.duration,
+          transitionDuration = _this$props6.transitionDuration,
+          onChange = _this$props6.onChange;
       var existingTweens = this.tweenGroup.getAll();
 
       if (!existingTweens.length) {
@@ -352,30 +302,30 @@ function (_Component) {
         };
 
         var animate = function animate() {
-          if (_this7.willUnmount) {
-            _this7.tweenGroup.removeAll();
+          if (_this6.willUnmount) {
+            _this6.tweenGroup.removeAll();
 
             return;
           }
 
           requestAnimationFrame(animate);
 
-          _this7.tweenGroup.update();
+          _this6.tweenGroup.update();
         };
 
         animate();
         var tween = new _tween["default"].Tween(value, this.tweenGroup).to({
           opacity: 1
         }, transitionDuration).onUpdate(function (value) {
-          _this7.divsContainer.children[newIndex].style.opacity = value.opacity;
-          _this7.divsContainer.children[index].style.opacity = 1 - value.opacity;
+          _this6.divsContainer.children[newIndex].style.opacity = value.opacity;
+          _this6.divsContainer.children[index].style.opacity = 1 - value.opacity;
         }).start();
         tween.onComplete(function () {
-          if (_this7.willUnmount) {
+          if (_this6.willUnmount) {
             return;
           }
 
-          _this7.setState({
+          _this6.setState({
             index: newIndex
           });
 
@@ -384,9 +334,9 @@ function (_Component) {
           }
 
           if (autoplay && (infinite || newIndex < children.length - 1)) {
-            clearTimeout(_this7.timeout);
-            _this7.timeout = setTimeout(function () {
-              _this7.fadeImages((newIndex + 1) % children.length);
+            clearTimeout(_this6.timeout);
+            _this6.timeout = setTimeout(function () {
+              _this6.fadeImages((newIndex + 1) % children.length);
             }, duration);
           }
         });
@@ -405,7 +355,7 @@ Fade.defaultProps = {
   arrows: true,
   autoplay: true,
   infinite: true,
-  pauseOnHover: false
+  pauseOnHover: true
 };
 Fade.propTypes = {
   duration: _propTypes["default"].number,

package/lib/helpers.js

@@ -3,12 +3,110 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUnhandledProps = getUnhandledProps;
+exports.showIndicators = exports.getUnhandledProps = exports.showPreviousArrow = exports.showNextArrow = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function getUnhandledProps(ComponentProps, props) {
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var getUnhandledProps = function getUnhandledProps(ComponentProps, props) {
   var handledProps = Object.keys(ComponentProps);
   return Object.keys(props).reduce(function (acc, prop) {
     if (handledProps.indexOf(prop) === -1) acc[prop] = props[prop];
     return acc;
   }, {});
-}
+};
+
+exports.getUnhandledProps = getUnhandledProps;
+
+var showPreviousArrow = function showPreviousArrow(_ref, currentIndex, moveSlides) {
+  var prevArrow = _ref.prevArrow,
+      infinite = _ref.infinite;
+  var isDisabled = currentIndex <= 0 && !infinite;
+  var props = {
+    'data-type': 'prev',
+    'aria-label': 'Previous Slide',
+    disabled: isDisabled,
+    onClick: moveSlides
+  };
+
+  if (prevArrow) {
+    return _react["default"].cloneElement(prevArrow, _objectSpread({
+      className: "".concat(prevArrow.props.className, " nav ").concat(isDisabled ? 'disabled' : '')
+    }, props));
+  }
+
+  var className = "nav default-nav ".concat(isDisabled ? 'disabled' : '');
+  return _react["default"].createElement("button", _extends({
+    className: className
+  }, props), _react["default"].createElement("span", null));
+};
+
+exports.showPreviousArrow = showPreviousArrow;
+
+var showNextArrow = function showNextArrow(_ref2, currentIndex, moveSlides) {
+  var nextArrow = _ref2.nextArrow,
+      infinite = _ref2.infinite,
+      children = _ref2.children;
+  var isDisabled = currentIndex === children.length - 1 && !infinite;
+  var props = {
+    'data-type': 'next',
+    'aria-label': 'Next Slide',
+    disabled: isDisabled,
+    onClick: moveSlides
+  };
+
+  if (nextArrow) {
+    return _react["default"].cloneElement(nextArrow, _objectSpread({
+      className: "".concat(nextArrow.props.className, " nav ").concat(isDisabled ? 'disabled' : '')
+    }, props));
+  }
+
+  var className = "nav default-nav ".concat(isDisabled ? 'disabled' : '');
+  return _react["default"].createElement("button", _extends({
+    className: className
+  }, props), _react["default"].createElement("span", null));
+};
+
+exports.showNextArrow = showNextArrow;
+
+var showDefaultIndicator = function showDefaultIndicator(currentIndex, key, indicatorProps) {
+  return _react["default"].createElement("li", {
+    key: key
+  }, _react["default"].createElement("button", _extends({
+    className: "each-slideshow-indicator ".concat(currentIndex === key ? 'active' : '')
+  }, indicatorProps)));
+};
+
+var showCustomIndicator = function showCustomIndicator(currentIndex, key, indicatorProps, eachIndicator) {
+  return _react["default"].cloneElement(eachIndicator, _objectSpread({
+    className: "".concat(eachIndicator.props.className, " ").concat(currentIndex === key ? 'active' : ''),
+    key: key
+  }, indicatorProps));
+};
+
+var showIndicators = function showIndicators(props, currentIndex, navigate) {
+  var children = props.children,
+      indicators = props.indicators;
+  var isCustomIndicator = typeof indicators !== 'boolean';
+  return _react["default"].createElement("div", {
+    className: "indicators"
+  }, children.map(function (_, key) {
+    var indicatorProps = {
+      'data-key': key,
+      'aria-label': "Go to slide ".concat(key + 1),
+      onClick: navigate
+    };
+    return isCustomIndicator ? showCustomIndicator(currentIndex, key, indicatorProps, indicators(key)) : showDefaultIndicator(currentIndex, key, indicatorProps);
+  }));
+};
+
+exports.showIndicators = showIndicators;

package/lib/slide.js

@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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"); } }
 
 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); } }
@@ -223,118 +225,69 @@ function (_Component) {
 
       this.slideImages(index - 1);
     }
-  }, {
-    key: "showIndicators",
-    value: function showIndicators() {
-      var _this7 = this;
-
-      var isCustomIndicator = typeof this.props.indicators !== 'boolean';
-      var className = !isCustomIndicator && 'each-slideshow-indicator';
-      return _react["default"].createElement("div", {
-        className: "indicators"
-      }, this.props.children.map(function (_, key) {
-        return _react["default"].createElement("div", {
-          key: key,
-          "data-key": key,
-          className: "".concat(className, " ").concat(_this7.state.index === key && 'active'),
-          onClick: _this7.goToSlide
-        }, isCustomIndicator && _this7.props.indicators(key));
-      }));
-    }
-  }, {
-    key: "showPreviousArrow",
-    value: function showPreviousArrow() {
-      var _this$props4 = this.props,
-          arrows = _this$props4.arrows,
-          prevArrow = _this$props4.prevArrow,
-          infinite = _this$props4.infinite;
-      var className = '';
-
-      if (!prevArrow) {
-        className = "nav ".concat(this.state.index <= 0 && !infinite && 'disabled');
-      }
-
-      return arrows && _react["default"].createElement("div", {
-        className: className,
-        "data-type": "prev",
-        onClick: this.moveSlides
-      }, prevArrow ? prevArrow : _react["default"].createElement("span", null));
-    }
-  }, {
-    key: "showNextArrow",
-    value: function showNextArrow() {
-      var _this$props5 = this.props,
-          arrows = _this$props5.arrows,
-          nextArrow = _this$props5.nextArrow,
-          infinite = _this$props5.infinite,
-          children = _this$props5.children;
-      var className = '';
-
-      if (!nextArrow) {
-        className = "nav ".concat(this.state.index === children.length - 1 && !infinite && 'disabled');
-      }
-
-      return arrows && _react["default"].createElement("div", {
-        className: className,
-        "data-type": "next",
-        onClick: this.moveSlides
-      }, nextArrow ? nextArrow : _react["default"].createElement("span", null));
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this8 = this;
+      var _this7 = this;
 
-      var _this$props6 = this.props,
-          children = _this$props6.children,
-          infinite = _this$props6.infinite,
-          indicators = _this$props6.indicators,
-          arrows = _this$props6.arrows;
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          infinite = _this$props4.infinite,
+          indicators = _this$props4.indicators,
+          arrows = _this$props4.arrows;
       var unhandledProps = (0, _helpers.getUnhandledProps)(Slideshow.propTypes, this.props);
       var index = this.state.index;
       var style = {
         transform: "translate(-".concat((index + 1) * this.width, "px)")
       };
-      return _react["default"].createElement("div", unhandledProps, _react["default"].createElement("div", {
+      return _react["default"].createElement("div", _extends({
+        "aria-roledescription": "carousel"
+      }, unhandledProps), _react["default"].createElement("div", {
         className: "react-slideshow-container",
         onMouseEnter: this.pauseSlides,
         onMouseLeave: this.startSlides,
         ref: this.reactSlideshowWrapper
-      }, this.showPreviousArrow(), _react["default"].createElement("div", {
+      }, arrows && (0, _helpers.showPreviousArrow)(this.props, this.state.index, this.moveSlides), _react["default"].createElement("div", {
         className: "react-slideshow-wrapper slide",
         ref: function ref(_ref4) {
-          return _this8.wrapper = _ref4;
+          return _this7.wrapper = _ref4;
         }
       }, _react["default"].createElement("div", {
         className: "images-wrap",
         style: style,
         ref: function ref(_ref3) {
-          return _this8.imageContainer = _ref3;
+          return _this7.imageContainer = _ref3;
         }
       }, _react["default"].createElement("div", {
-        "data-index": "-1"
+        "data-index": "-1",
+        "aria-roledescription": "slide",
+        "aria-hidden": "false"
       }, children[children.length - 1]), children.map(function (each, key) {
         return _react["default"].createElement("div", {
           "data-index": key,
           key: key,
-          className: key === index ? 'active' : ''
+          className: key === index ? 'active' : '',
+          "aria-roledescription": "slide",
+          "aria-hidden": key === index ? 'false' : 'true'
         }, each);
       }), _react["default"].createElement("div", {
-        "data-index": "-1"
-      }, children[0]))), this.showNextArrow()), indicators && this.showIndicators());
+        "data-index": "-1",
+        "aria-roledescription": "slide",
+        "aria-hidden": "false"
+      }, children[0]))), arrows && (0, _helpers.showNextArrow)(this.props, this.state.index, this.moveSlides)), indicators && (0, _helpers.showIndicators)(this.props, this.state.index, this.goToSlide));
     }
   }, {
     key: "slideImages",
     value: function slideImages(index) {
-      var _this9 = this;
-
-      var _this$props7 = this.props,
-          children = _this$props7.children,
-          transitionDuration = _this$props7.transitionDuration,
-          autoplay = _this$props7.autoplay,
-          infinite = _this$props7.infinite,
-          duration = _this$props7.duration,
-          onChange = _this$props7.onChange;
+      var _this8 = this;
+
+      var _this$props5 = this.props,
+          children = _this$props5.children,
+          transitionDuration = _this$props5.transitionDuration,
+          autoplay = _this$props5.autoplay,
+          infinite = _this$props5.infinite,
+          duration = _this$props5.duration,
+          onChange = _this$props5.onChange;
       var existingTweens = this.tweenGroup.getAll();
 
       if (!existingTweens.length) {
@@ -345,39 +298,39 @@ function (_Component) {
         var tween = new _tween["default"].Tween(value, this.tweenGroup).to({
           margin: -this.width * (index + 1)
         }, transitionDuration).onUpdate(function (value) {
-          _this9.imageContainer.style.transform = "translate(".concat(value.margin, "px)");
+          _this8.imageContainer.style.transform = "translate(".concat(value.margin, "px)");
         }).start();
 
         var animate = function animate() {
-          if (_this9.willUnmount) {
-            _this9.tweenGroup.removeAll();
+          if (_this8.willUnmount) {
+            _this8.tweenGroup.removeAll();
 
             return;
           }
 
           requestAnimationFrame(animate);
 
-          _this9.tweenGroup.update();
+          _this8.tweenGroup.update();
         };
 
         animate();
         tween.onComplete(function () {
           var newIndex = index < 0 ? children.length - 1 : index >= children.length ? 0 : index;
 
-          if (_this9.willUnmount) {
+          if (_this8.willUnmount) {
             return;
           }
 
           if (typeof onChange === 'function') {
-            onChange(_this9.state.index, newIndex);
+            onChange(_this8.state.index, newIndex);
           }
 
-          _this9.setState({
+          _this8.setState({
             index: newIndex
           }, function () {
-            if (autoplay && (infinite || _this9.state.index < children.length)) {
-              _this9.timeout = setTimeout(function () {
-                return _this9.goNext();
+            if (autoplay && (infinite || _this8.state.index < children.length)) {
+              _this8.timeout = setTimeout(function () {
+                return _this8.goNext();
               }, duration);
             }
           });
@@ -397,7 +350,7 @@ Slideshow.defaultProps = {
   autoplay: true,
   indicators: false,
   arrows: true,
-  pauseOnHover: false
+  pauseOnHover: true
 };
 Slideshow.propTypes = {
   duration: _propTypes["default"].number,