[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\"env\"],\n  \"plugins\": [\"transform-object-rest-spread\", \"transform-react-jsx\"]\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "/node_modules\n"
  },
  {
    "path": ".nvmrc",
    "content": "v6.10\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2017 Paul Fitzgerald\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# React Slidez\n\n<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/pau1fitz/react-slidez/master/slidez.png\" width=\"250\"/>\n </p>\n <p align=\"center\">\n  <g-emoji alias=\"sparkles\" fallback-src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png\" ios-version=\"6.0\">✨</g-emoji>\nCustomisable React Slideshow component.<g-emoji alias=\"sparkles\" fallback-src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png\" ios-version=\"6.0\">✨</g-emoji>\n</p>\n\n## Demo\n\n<g-emoji alias=\"muscle\" fallback-src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f4aa.png\" ios-version=\"6.0\">💪</g-emoji>\n[Live demo](http://pau1fitz.github.io/react-slidez/)\n<g-emoji alias=\"muscle\" fallback-src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f4aa.png\" ios-version=\"6.0\">💪</g-emoji>\n\n## Installation\n\n```\nnpm install react-slidez --save\n```\n\n### Properties\n\n| Property       | Description                                                                                                                                  | Type    | Default    |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- |\n| showIndex      | Show the index of the current slide                                                                                                          | Boolean | `false`    |\n| showArrows     | Show arrows to navigate through the slides                                                                                                   | Boolean | `true`     |\n| autoplay       | Select whether you want the slideshow to autoplay or not                                                                                     | Boolean | `true`     |\n| enableKeyboard | Select whether you want to allow the user change the slides with the keyboard                                                                | Boolean | `true`     |\n| useDotIndex    | Select whether you want the index to be dots or numbers                                                                                      | Boolean | `false`    |\n| slideInterval  | Dictate the speed in ms at which the slides change                                                                                           | Integer | `2000`     |\n| defaultIndex   | Choose the index that you wish to start at                                                                                                   | Integer | `0`        |\n| slides         | The slides you pass into the component. This can be an array of images, or other components which are passed as children. See example below. | Array   | No default |\n| effect         | Choose the animation effect of your slideshow. Options include `fade`, `left`, `top`, `right`, `bottom`, `bounce-right`, `bounce-left`       | String  | `\"fade\"`   |\n| height         | Choose the height of the slideshow. Example `height={'50px'}` or `height={'50%'}`                                                            | String  | `\"100%\"`   |\n| width          | Choose the width of the slideshow. Example `width=\"50px\"` or `width=\"50%\"`                                                               | String  | `\"100%\"`   |\n\n## Usage\n\n```js\nconst Slideshow = require(\"react-slidez\");\n\n<Slideshow\n  showIndex\n  showArrows\n  autoplay\n  enableKeyboard\n  useDotIndex\n  slideInterval={2000}\n  defaultIndex={1}\n  slides={[\"1.jpg\", \"2.jpg\"]}\n  effect=\"fade\"\n  height=\"100%\"\n  width=\"100%\"\n/>\n```\n\nYou can also pass other components to the `Slideshow` component as children. All the same properties as above are available.\n\n```js\nconst Slideshow = require(\"react-slidez\");\n\n<Slideshow>\n  <ComponentOne />\n  <ComponentTwo />\n  <Checkout />\n</Slideshow>\n```\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2017 Paul Fitzgerald\n"
  },
  {
    "path": "build/index.js",
    "content": "module.exports =\n/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// identity function for calling harmony imports with the correct context\n/******/ \t__webpack_require__.i = function(value) { return value; };\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 3);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(4);\nif(typeof content === 'string') content = [[module.i, content, '']];\n// Prepare cssTransformation\nvar transform;\n\nvar options = {}\noptions.transform = transform\n// add the styles to the DOM\nvar update = __webpack_require__(6)(content, options);\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(false) {\n\t// When the styles change, update the <style> tags\n\tif(!content.locals) {\n\t\tmodule.hot.accept(\"!!../node_modules/css-loader/index.js!./Slideshow.css\", function() {\n\t\t\tvar newContent = require(\"!!../node_modules/css-loader/index.js!./Slideshow.css\");\n\t\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\t\t\tupdate(newContent);\n\t\t});\n\t}\n\t// When the module is disposed, remove the <style> tags\n\tmodule.hot.dispose(function() { update(); });\n}\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports) {\n\nmodule.exports = require(\"react\");\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\n__webpack_require__(0);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Arrows = function Arrows(props) {\n  return _react2.default.createElement(\n    'div',\n    { className: 'arrows' },\n    _react2.default.createElement('span', {\n      onClick: props.decreaseCount,\n      className: 'arrow btn-arrow btn-arrow-left'\n    }),\n    _react2.default.createElement('span', {\n      onClick: props.increaseCount,\n      className: 'arrow btn-arrow btn-arrow-right'\n    })\n  );\n};\n\nexports.default = Arrows;\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _Arrows = __webpack_require__(2);\n\nvar _Arrows2 = _interopRequireDefault(_Arrows);\n\n__webpack_require__(0);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Slideshow = function (_Component) {\n  _inherits(Slideshow, _Component);\n\n  function Slideshow(props) {\n    _classCallCheck(this, Slideshow);\n\n    var _this = _possibleConstructorReturn(this, (Slideshow.__proto__ || Object.getPrototypeOf(Slideshow)).call(this, props));\n\n    _this.state = {\n      currentSlide: props.defaultIndex,\n      slideInterval: props.slideInterval,\n      showIndex: props.showIndex,\n      useDotIndex: props.useDotIndex,\n      showArrows: props.showArrows,\n      effect: props.effect,\n      autoplay: props.autoplay,\n      enableKeyboard: props.enableKeyboard,\n      slides: props.slides.length > 0 ? props.slides : props.children\n    };\n\n    _this.runSlideShow = _this.runSlideShow.bind(_this);\n    _this.autoSlideshow = _this.autoSlideshow.bind(_this);\n    _this.restartSlideshow = _this.restartSlideshow.bind(_this);\n    _this.increaseCount = _this.increaseCount.bind(_this);\n    _this.decreaseCount = _this.decreaseCount.bind(_this);\n    _this.handleKeyboard = _this.handleKeyboard.bind(_this);\n    return _this;\n  }\n\n  _createClass(Slideshow, [{\n    key: 'componentDidMount',\n    value: function componentDidMount() {\n      if (this.state.autoplay) this.runSlideShow();\n\n      if (this.state.enableKeyboard) document.addEventListener('keydown', this.handleKeyboard);\n    }\n  }, {\n    key: 'handleKeyboard',\n    value: function handleKeyboard(e) {\n      e.keyCode === 37 ? this.decreaseCount() : e.keyCode === 39 ? this.increaseCount() : null;\n    }\n  }, {\n    key: 'runSlideShow',\n    value: function runSlideShow() {\n      var intervalId = setInterval(this.autoSlideshow, this.state.slideInterval);\n      this.setState({\n        intervalId: intervalId\n      });\n    }\n  }, {\n    key: 'componentWillUnmount',\n    value: function componentWillUnmount() {\n      clearInterval(this.state.intervalId);\n      document.removeEventListener('keydown', this.handleKeyboard);\n    }\n  }, {\n    key: 'autoSlideshow',\n    value: function autoSlideshow() {\n      this.setState({\n        currentSlide: (this.state.currentSlide + 1) % this.state.slides.length\n      });\n    }\n  }, {\n    key: 'restartSlideshow',\n    value: function restartSlideshow() {\n      clearInterval(this.state.intervalId);\n      this.runSlideShow();\n    }\n  }, {\n    key: 'increaseCount',\n    value: function increaseCount() {\n      this.state.effect === 'left' ? this.setState({\n        effect: 'right'\n      }) : this.state.effect === 'bounce-left' ? this.setState({\n        effect: 'bounce-right'\n      }) : null;\n\n      this.state.autoplay ? this.restartSlideshow() : null;\n      this.setState({\n        currentSlide: (this.state.currentSlide + 1) % this.state.slides.length\n      });\n    }\n  }, {\n    key: 'decreaseCount',\n    value: function decreaseCount() {\n      this.state.effect === 'right' ? this.setState({\n        effect: 'left'\n      }) : this.state.effect === 'bounce-right' ? this.setState({\n        effect: 'bounce-left'\n      }) : null;\n\n      this.state.autoplay ? this.restartSlideshow() : null;\n\n      var currentSlide = void 0;\n      currentSlide = this.state.currentSlide === 0 ? this.state.slides.length - 1 : currentSlide = this.state.currentSlide - 1;\n      this.setState({\n        currentSlide: currentSlide\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var _state = this.state,\n          slides = _state.slides,\n          showIndex = _state.showIndex,\n          useDotIndex = _state.useDotIndex,\n          effect = _state.effect,\n          showArrows = _state.showArrows;\n\n\n      var slideEffect = effect === undefined ? 'fade' : effect;\n      var slideShowSlides = void 0;\n      var slideShowIndex = void 0;\n\n      if (!this.props.children) {\n        slideShowSlides = slides.map(function (slide, i) {\n          return _react2.default.createElement('li', {\n            className: 'slide ' + effect + ' ' + (_this2.state.currentSlide === i ? 'showing-' + slideEffect : ''),\n            key: i,\n            style: { backgroundImage: 'url(' + slide + ')' }\n          });\n        });\n      } else {\n        slideShowSlides = slides.map(function (slide, i) {\n          return _react2.default.createElement(\n            'li',\n            {\n              className: 'slide ' + effect + ' ' + (_this2.state.currentSlide === i ? 'showing-' + slideEffect : ''),\n              key: i\n            },\n            slide\n          );\n        });\n      }\n\n      if (useDotIndex) {\n        slideShowIndex = _react2.default.createElement(\n          'div',\n          { className: 'show-index is-dot' },\n          slides.map(function (slide, i) {\n            return _react2.default.createElement('span', {\n              className: 'dot ' + (_this2.state.currentSlide === i ? 'is-active' : ''),\n              key: 'dot' + i\n            });\n          })\n        );\n      } else {\n        slideShowIndex = _react2.default.createElement(\n          'div',\n          { className: 'show-index is-text' },\n          _react2.default.createElement(\n            'p',\n            null,\n            this.state.currentSlide + 1 + ' / ' + slides.length\n          )\n        );\n      }\n\n      return _react2.default.createElement(\n        'div',\n        {\n          style: {\n            position: 'absolute',\n            height: this.props.height || '100%',\n            width: this.props.width || '100%'\n          }\n        },\n        _react2.default.createElement(\n          'div',\n          { className: 'slideshow-container' },\n          _react2.default.createElement(\n            'ul',\n            { className: 'slides' },\n            slideShowSlides\n          ),\n          showArrows && _react2.default.createElement(_Arrows2.default, {\n            decreaseCount: this.decreaseCount,\n            increaseCount: this.increaseCount\n          }),\n          showIndex && slideShowIndex\n        )\n      );\n    }\n  }]);\n\n  return Slideshow;\n}(_react.Component);\n\nSlideshow.defaultProps = {\n  showIndex: false,\n  showArrows: true,\n  autoplay: true,\n  enableKeyboard: true,\n  useDotIndex: false,\n  slideInterval: 2000,\n  defaultIndex: 0,\n  effect: 'fade',\n  slides: [],\n  height: '100%',\n  width: '100%'\n};\n\nexports.default = Slideshow;\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\nexports = module.exports = __webpack_require__(5)(false);\n// imports\n\n\n// module\nexports.push([module.i, \".slideshow-container {\\r\\n  position: absolute;\\r\\n  height: 100%;\\r\\n  width: 100%;\\r\\n}\\r\\n\\r\\n.slides {\\r\\n  position: relative;\\r\\n  height: 100%;\\r\\n  padding: 0px;\\r\\n  margin: 0px;\\r\\n  list-style-type: none;\\r\\n  overflow: hidden;\\r\\n}\\r\\n\\r\\n.slide {\\r\\n  position: absolute;\\r\\n  left: 0;\\r\\n  top: 0;\\r\\n  width: 100%;\\r\\n  height: 100%;\\r\\n  opacity: 0;\\r\\n  z-index: 1;\\r\\n  padding: 0;\\r\\n  margin: 0;\\r\\n  background-repeat: no-repeat;\\r\\n  background-size: cover;\\r\\n  background-position: center;\\r\\n}\\r\\n\\r\\n.showing-none {\\r\\n  opacity: 1;\\r\\n  z-index: 2;\\r\\n}\\r\\n\\r\\n.showing-fade {\\r\\n  opacity: 1;\\r\\n  z-index: 2;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-fade;\\r\\n}\\r\\n\\r\\n@keyframes slide-fade {\\r\\n  from {\\r\\n    opacity: 0;\\r\\n  }\\r\\n\\r\\n  to {\\r\\n    opacity: 1;\\r\\n  }\\r\\n}\\r\\n\\r\\n.showing-right {\\r\\n  opacity: 1;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-right;\\r\\n}\\r\\n\\r\\n@keyframes slide-right {\\r\\n  from {\\r\\n    left: -50%;\\r\\n  }\\r\\n\\r\\n  to {\\r\\n    left: 0;\\r\\n  }\\r\\n}\\r\\n\\r\\n.showing-left {\\r\\n  opacity: 1;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-left;\\r\\n}\\r\\n\\r\\n@keyframes slide-left {\\r\\n  from {\\r\\n    left: 100%;\\r\\n  }\\r\\n\\r\\n  to {\\r\\n    left: 0;\\r\\n  }\\r\\n}\\r\\n\\r\\n.showing-top {\\r\\n  opacity: 1;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-top;\\r\\n}\\r\\n\\r\\n@keyframes slide-top {\\r\\n  from {\\r\\n    top: 100%;\\r\\n  }\\r\\n\\r\\n  to {\\r\\n    top: 0;\\r\\n  }\\r\\n}\\r\\n\\r\\n.showing-bottom {\\r\\n  opacity: 1;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-bottom;\\r\\n}\\r\\n\\r\\n@keyframes slide-bottom {\\r\\n  from {\\r\\n    top: -100%;\\r\\n  }\\r\\n\\r\\n  to {\\r\\n    top: 0;\\r\\n  }\\r\\n}\\r\\n\\r\\n.showing-bounce-left {\\r\\n  opacity: 1;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-bounce-left;\\r\\n}\\r\\n\\r\\n@keyframes slide-bounce-left {\\r\\n  0% {\\r\\n    left: 100%;\\r\\n  }\\r\\n  50% {\\r\\n    left: -20%;\\r\\n  }\\r\\n  100% {\\r\\n    left: 0;\\r\\n  }\\r\\n}\\r\\n\\r\\n.showing-bounce-right {\\r\\n  opacity: 1;\\r\\n  animation-duration: 1s;\\r\\n  animation-name: slide-bounce-right;\\r\\n}\\r\\n\\r\\n@keyframes slide-bounce-right {\\r\\n  0% {\\r\\n    left: -100%;\\r\\n  }\\r\\n  50% {\\r\\n    left: 20%;\\r\\n  }\\r\\n  100% {\\r\\n    left: 0;\\r\\n  }\\r\\n}\\r\\n\\r\\n.show-index.is-text {\\r\\n  color: #fff;\\r\\n  position: absolute;\\r\\n  bottom: 0;\\r\\n  z-index: 100;\\r\\n  left: 50%;\\r\\n  font-size: 28px;\\r\\n  font-family: 'Slabo 27px', serif;\\r\\n}\\r\\n\\r\\n.show-index.is-dot {\\r\\n  color: #fff;\\r\\n  position: absolute;\\r\\n  bottom: 0;\\r\\n  z-index: 100;\\r\\n  left: 50%;\\r\\n  font-size: 28px;\\r\\n  font-family: 'Slabo 27px', serif;\\r\\n  display: flex;\\r\\n  transform: translate(-50%);\\r\\n}\\r\\n\\r\\n.show-index.is-dot .dot {\\r\\n  width: 10px;\\r\\n  height: 10px;\\r\\n  margin: 0 3px 3rem 3px;\\r\\n  background-color: white;\\r\\n  border-radius: 50%;\\r\\n  opacity: 0.5;\\r\\n}\\r\\n\\r\\n.show-index.is-dot .dot.is-active {\\r\\n  opacity: 1;\\r\\n}\\r\\n\\r\\n.slideshow-container button:focus {\\r\\n  outline: none;\\r\\n}\\r\\n\\r\\n.btn-arrow {\\r\\n  color: transparent;\\r\\n  display: block;\\r\\n  font-size: 5px;\\r\\n  line-height: 0;\\r\\n  -moz-transition: all 0.3s;\\r\\n  -o-transition: all 0.3s;\\r\\n  -webkit-transition: all 0.3s;\\r\\n  transition: all 0.3s;\\r\\n  position: absolute;\\r\\n  top: 50%;\\r\\n  z-index: 10;\\r\\n  cursor: pointer;\\r\\n  height: 50px;\\r\\n  width: 50px;\\r\\n  border-radius: 50%;\\r\\n  padding: 5px;\\r\\n  z-index: 10000;\\r\\n}\\r\\n\\r\\n.btn-arrow:hover,\\r\\n.btn-arrow:focus {\\r\\n  background: rgba(256, 256, 256, 0.1);\\r\\n}\\r\\n\\r\\n.btn-arrow:hover::before,\\r\\n.btn-arrow:hover::after,\\r\\n.btn-arrow:focus::before,\\r\\n.btn-arrow:focus::after {\\r\\n  background: rgba(256, 256, 256, 0.5);\\r\\n}\\r\\n\\r\\n.btn-arrow::before {\\r\\n  content: '';\\r\\n  display: block;\\r\\n  background: rgba(256, 256, 256, 0.6);\\r\\n  position: absolute;\\r\\n  top: 0;\\r\\n  left: 0;\\r\\n  width: 6em;\\r\\n  height: 2em;\\r\\n}\\r\\n\\r\\n.btn-arrow::after {\\r\\n  content: '';\\r\\n  display: block;\\r\\n  background: rgba(256, 256, 256, 0.6);\\r\\n  position: absolute;\\r\\n  top: 0;\\r\\n  left: 0;\\r\\n  width: 2em;\\r\\n  height: 6em;\\r\\n}\\r\\n.btn-arrow.btn-arrow-left {\\r\\n  -moz-transform: rotate(-45deg);\\r\\n  -ms-transform: rotate(-45deg);\\r\\n  -webkit-transform: rotate(-45deg);\\r\\n  transform: rotate(-45deg);\\r\\n  left: 5%;\\r\\n}\\r\\n.btn-arrow.btn-arrow-left::before,\\r\\n.btn-arrow.btn-arrow-left::after {\\r\\n  top: 18px;\\r\\n  left: 18px;\\r\\n}\\r\\n.btn-arrow.btn-arrow-right {\\r\\n  -moz-transform: rotate(135deg);\\r\\n  -ms-transform: rotate(135deg);\\r\\n  -webkit-transform: rotate(135deg);\\r\\n  transform: rotate(135deg);\\r\\n  right: 5%;\\r\\n}\\r\\n.btn-arrow.btn-arrow-right::before,\\r\\n.btn-arrow.btn-arrow-right::after {\\r\\n  top: 18px;\\r\\n  left: 18px;\\r\\n}\\r\\n\", \"\"]);\n\n// exports\n\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\n/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t//  when a module is imported multiple times with different media queries.\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(selector) {\n\t\tif (typeof memo[selector] === \"undefined\") {\n\t\t\tmemo[selector] = fn.call(this, selector);\n\t\t}\n\n\t\treturn memo[selector]\n\t};\n})(function (target) {\n\treturn document.querySelector(target)\n});\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = __webpack_require__(7);\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n\t// tags it will allow on a page\n\tif (!options.singleton) options.singleton = isOldIE();\n\n\t// By default, add <style> tags to the <head> element\n\tif (!options.insertInto) options.insertInto = \"head\";\n\n\t// By default, add <style> tags to the bottom of the target\n\tif (!options.insertAt) options.insertAt = \"bottom\";\n\n\tvar styles = listToStyles(list, options);\n\n\taddStylesToDom(styles, options);\n\n\treturn function update (newList) {\n\t\tvar mayRemove = [];\n\n\t\tfor (var i = 0; i < styles.length; i++) {\n\t\t\tvar item = styles[i];\n\t\t\tvar domStyle = stylesInDom[item.id];\n\n\t\t\tdomStyle.refs--;\n\t\t\tmayRemove.push(domStyle);\n\t\t}\n\n\t\tif(newList) {\n\t\t\tvar newStyles = listToStyles(newList, options);\n\t\t\taddStylesToDom(newStyles, options);\n\t\t}\n\n\t\tfor (var i = 0; i < mayRemove.length; i++) {\n\t\t\tvar domStyle = mayRemove[i];\n\n\t\t\tif(domStyle.refs === 0) {\n\t\t\t\tfor (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();\n\n\t\t\t\tdelete stylesInDom[domStyle.id];\n\t\t\t}\n\t\t}\n\t};\n};\n\nfunction addStylesToDom (styles, options) {\n\tfor (var i = 0; i < styles.length; i++) {\n\t\tvar item = styles[i];\n\t\tvar domStyle = stylesInDom[item.id];\n\n\t\tif(domStyle) {\n\t\t\tdomStyle.refs++;\n\n\t\t\tfor(var j = 0; j < domStyle.parts.length; j++) {\n\t\t\t\tdomStyle.parts[j](item.parts[j]);\n\t\t\t}\n\n\t\t\tfor(; j < item.parts.length; j++) {\n\t\t\t\tdomStyle.parts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\t\t} else {\n\t\t\tvar parts = [];\n\n\t\t\tfor(var j = 0; j < item.parts.length; j++) {\n\t\t\t\tparts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\n\t\t\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\n\t\t}\n\t}\n}\n\nfunction listToStyles (list, options) {\n\tvar styles = [];\n\tvar newStyles = {};\n\n\tfor (var i = 0; i < list.length; i++) {\n\t\tvar item = list[i];\n\t\tvar id = options.base ? item[0] + options.base : item[0];\n\t\tvar css = item[1];\n\t\tvar media = item[2];\n\t\tvar sourceMap = item[3];\n\t\tvar part = {css: css, media: media, sourceMap: sourceMap};\n\n\t\tif(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});\n\t\telse newStyles[id].parts.push(part);\n\t}\n\n\treturn styles;\n}\n\nfunction insertStyleElement (options, style) {\n\tvar target = getElement(options.insertInto)\n\n\tif (!target) {\n\t\tthrow new Error(\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\");\n\t}\n\n\tvar lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];\n\n\tif (options.insertAt === \"top\") {\n\t\tif (!lastStyleElementInsertedAtTop) {\n\t\t\ttarget.insertBefore(style, target.firstChild);\n\t\t} else if (lastStyleElementInsertedAtTop.nextSibling) {\n\t\t\ttarget.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);\n\t\t} else {\n\t\t\ttarget.appendChild(style);\n\t\t}\n\t\tstylesInsertedAtTop.push(style);\n\t} else if (options.insertAt === \"bottom\") {\n\t\ttarget.appendChild(style);\n\t} else {\n\t\tthrow new Error(\"Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.\");\n\t}\n}\n\nfunction removeStyleElement (style) {\n\tif (style.parentNode === null) return false;\n\tstyle.parentNode.removeChild(style);\n\n\tvar idx = stylesInsertedAtTop.indexOf(style);\n\tif(idx >= 0) {\n\t\tstylesInsertedAtTop.splice(idx, 1);\n\t}\n}\n\nfunction createStyleElement (options) {\n\tvar style = document.createElement(\"style\");\n\n\toptions.attrs.type = \"text/css\";\n\n\taddAttrs(style, options.attrs);\n\tinsertStyleElement(options, style);\n\n\treturn style;\n}\n\nfunction createLinkElement (options) {\n\tvar link = document.createElement(\"link\");\n\n\toptions.attrs.type = \"text/css\";\n\toptions.attrs.rel = \"stylesheet\";\n\n\taddAttrs(link, options.attrs);\n\tinsertStyleElement(options, link);\n\n\treturn link;\n}\n\nfunction addAttrs (el, attrs) {\n\tObject.keys(attrs).forEach(function (key) {\n\t\tel.setAttribute(key, attrs[key]);\n\t});\n}\n\nfunction addStyle (obj, options) {\n\tvar style, update, remove, result;\n\n\t// If a transform function was defined, run it on the css\n\tif (options.transform && obj.css) {\n\t    result = options.transform(obj.css);\n\n\t    if (result) {\n\t    \t// If transform returns a value, use that instead of the original css.\n\t    \t// This allows running runtime transformations on the css.\n\t    \tobj.css = result;\n\t    } else {\n\t    \t// If the transform function returns a falsy value, don't add this css.\n\t    \t// This allows conditional loading of css\n\t    \treturn function() {\n\t    \t\t// noop\n\t    \t};\n\t    }\n\t}\n\n\tif (options.singleton) {\n\t\tvar styleIndex = singletonCounter++;\n\n\t\tstyle = singleton || (singleton = createStyleElement(options));\n\n\t\tupdate = applyToSingletonTag.bind(null, style, styleIndex, false);\n\t\tremove = applyToSingletonTag.bind(null, style, styleIndex, true);\n\n\t} else if (\n\t\tobj.sourceMap &&\n\t\ttypeof URL === \"function\" &&\n\t\ttypeof URL.createObjectURL === \"function\" &&\n\t\ttypeof URL.revokeObjectURL === \"function\" &&\n\t\ttypeof Blob === \"function\" &&\n\t\ttypeof btoa === \"function\"\n\t) {\n\t\tstyle = createLinkElement(options);\n\t\tupdate = updateLink.bind(null, style, options);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\n\t\t\tif(style.href) URL.revokeObjectURL(style.href);\n\t\t};\n\t} else {\n\t\tstyle = createStyleElement(options);\n\t\tupdate = applyToTag.bind(null, style);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\t\t};\n\t}\n\n\tupdate(obj);\n\n\treturn function updateStyle (newObj) {\n\t\tif (newObj) {\n\t\t\tif (\n\t\t\t\tnewObj.css === obj.css &&\n\t\t\t\tnewObj.media === obj.media &&\n\t\t\t\tnewObj.sourceMap === obj.sourceMap\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tupdate(obj = newObj);\n\t\t} else {\n\t\t\tremove();\n\t\t}\n\t};\n}\n\nvar replaceText = (function () {\n\tvar textStore = [];\n\n\treturn function (index, replacement) {\n\t\ttextStore[index] = replacement;\n\n\t\treturn textStore.filter(Boolean).join('\\n');\n\t};\n})();\n\nfunction applyToSingletonTag (style, index, remove, obj) {\n\tvar css = remove ? \"\" : obj.css;\n\n\tif (style.styleSheet) {\n\t\tstyle.styleSheet.cssText = replaceText(index, css);\n\t} else {\n\t\tvar cssNode = document.createTextNode(css);\n\t\tvar childNodes = style.childNodes;\n\n\t\tif (childNodes[index]) style.removeChild(childNodes[index]);\n\n\t\tif (childNodes.length) {\n\t\t\tstyle.insertBefore(cssNode, childNodes[index]);\n\t\t} else {\n\t\t\tstyle.appendChild(cssNode);\n\t\t}\n\t}\n}\n\nfunction applyToTag (style, obj) {\n\tvar css = obj.css;\n\tvar media = obj.media;\n\n\tif(media) {\n\t\tstyle.setAttribute(\"media\", media)\n\t}\n\n\tif(style.styleSheet) {\n\t\tstyle.styleSheet.cssText = css;\n\t} else {\n\t\twhile(style.firstChild) {\n\t\t\tstyle.removeChild(style.firstChild);\n\t\t}\n\n\t\tstyle.appendChild(document.createTextNode(css));\n\t}\n}\n\nfunction updateLink (link, options, obj) {\n\tvar css = obj.css;\n\tvar sourceMap = obj.sourceMap;\n\n\t/*\n\t\tIf convertToAbsoluteUrls isn't defined, but sourcemaps are enabled\n\t\tand there is no publicPath defined then lets turn convertToAbsoluteUrls\n\t\ton by default.  Otherwise default to the convertToAbsoluteUrls option\n\t\tdirectly\n\t*/\n\tvar autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;\n\n\tif (options.convertToAbsoluteUrls || autoFixUrls) {\n\t\tcss = fixUrls(css);\n\t}\n\n\tif (sourceMap) {\n\t\t// http://stackoverflow.com/a/26603875\n\t\tcss += \"\\n/*# sourceMappingURL=data:application/json;base64,\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \" */\";\n\t}\n\n\tvar blob = new Blob([css], { type: \"text/css\" });\n\n\tvar oldSrc = link.href;\n\n\tlink.href = URL.createObjectURL(blob);\n\n\tif(oldSrc) URL.revokeObjectURL(oldSrc);\n}\n\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n\n/**\n * When source maps are enabled, `style-loader` uses a link element with a data-uri to\n * embed the css on the page. This breaks all relative urls because now they are relative to a\n * bundle instead of the current page.\n *\n * One solution is to only use full urls, but that may be impossible.\n *\n * Instead, this function \"fixes\" the relative urls to be absolute according to the current page location.\n *\n * A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.\n *\n */\n\nmodule.exports = function (css) {\n  // get current location\n  var location = typeof window !== \"undefined\" && window.location;\n\n  if (!location) {\n    throw new Error(\"fixUrls requires window.location\");\n  }\n\n\t// blank or null?\n\tif (!css || typeof css !== \"string\") {\n\t  return css;\n  }\n\n  var baseUrl = location.protocol + \"//\" + location.host;\n  var currentDir = baseUrl + location.pathname.replace(/\\/[^\\/]*$/, \"/\");\n\n\t// convert each url(...)\n\t/*\n\tThis regular expression is just a way to recursively match brackets within\n\ta string.\n\n\t /url\\s*\\(  = Match on the word \"url\" with any whitespace after it and then a parens\n\t   (  = Start a capturing group\n\t     (?:  = Start a non-capturing group\n\t         [^)(]  = Match anything that isn't a parentheses\n\t         |  = OR\n\t         \\(  = Match a start parentheses\n\t             (?:  = Start another non-capturing groups\n\t                 [^)(]+  = Match anything that isn't a parentheses\n\t                 |  = OR\n\t                 \\(  = Match a start parentheses\n\t                     [^)(]*  = Match anything that isn't a parentheses\n\t                 \\)  = Match a end parentheses\n\t             )  = End Group\n              *\\) = Match anything and then a close parens\n          )  = Close non-capturing group\n          *  = Match anything\n       )  = Close capturing group\n\t \\)  = Match a close parens\n\n\t /gi  = Get all matches, not the first.  Be case insensitive.\n\t */\n\tvar fixedCss = css.replace(/url\\s*\\(((?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)\\)/gi, function(fullMatch, origUrl) {\n\t\t// strip quotes (if they exist)\n\t\tvar unquotedOrigUrl = origUrl\n\t\t\t.trim()\n\t\t\t.replace(/^\"(.*)\"$/, function(o, $1){ return $1; })\n\t\t\t.replace(/^'(.*)'$/, function(o, $1){ return $1; });\n\n\t\t// already a full url? no change\n\t\tif (/^(#|data:|http:\\/\\/|https:\\/\\/|file:\\/\\/\\/)/i.test(unquotedOrigUrl)) {\n\t\t  return fullMatch;\n\t\t}\n\n\t\t// convert the url to a full url\n\t\tvar newUrl;\n\n\t\tif (unquotedOrigUrl.indexOf(\"//\") === 0) {\n\t\t  \t//TODO: should we add protocol?\n\t\t\tnewUrl = unquotedOrigUrl;\n\t\t} else if (unquotedOrigUrl.indexOf(\"/\") === 0) {\n\t\t\t// path should be relative to the base url\n\t\t\tnewUrl = baseUrl + unquotedOrigUrl; // already starts with '/'\n\t\t} else {\n\t\t\t// path should be relative to current directory\n\t\t\tnewUrl = currentDir + unquotedOrigUrl.replace(/^\\.\\//, \"\"); // Strip leading './'\n\t\t}\n\n\t\t// send back the fixed url(...)\n\t\treturn \"url(\" + JSON.stringify(newUrl) + \")\";\n\t});\n\n\t// send back the fixed css\n\treturn fixedCss;\n};\n\n\n/***/ })\n/******/ ]);"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-slidez\",\n  \"version\": \"0.0.31\",\n  \"description\": \"React Slideshow Component\",\n  \"main\": \"build/index.js\",\n  \"keywords\": [\n    \"react\",\n    \"slideshow\"\n  ],\n  \"peerDependencies\": {\n    \"react\": \"^15.5.4\"\n  },\n  \"dependencies\": {\n    \"react\": \"^15.5.4\",\n    \"webpack\": \"^2.6.1\"\n  },\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"start\": \"webpack --watch\",\n    \"build\": \"webpack\"\n  },\n  \"author\": {\n    \"name\": \"Paul Fitzgerald\"\n  },\n  \"devDependencies\": {\n    \"babel-cli\": \"^6.24.1\",\n    \"babel-core\": \"^6.24.1\",\n    \"babel-loader\": \"^7.0.0\",\n    \"babel-plugin-transform-object-rest-spread\": \"^6.23.0\",\n    \"babel-plugin-transform-react-jsx\": \"^6.24.1\",\n    \"babel-preset-env\": \"^1.5.1\",\n    \"css-loader\": \"^0.28.4\",\n    \"style-loader\": \"^0.18.2\"\n  }\n}\n"
  },
  {
    "path": "src/Arrows.js",
    "content": "import React from 'react';\nimport './Slideshow.css';\n\nconst Arrows = function(props) {\n  return (\n    <div className=\"arrows\">\n      <span\n        onClick={props.decreaseCount}\n        className=\"arrow btn-arrow btn-arrow-left\"\n      />\n      <span\n        onClick={props.increaseCount}\n        className=\"arrow btn-arrow btn-arrow-right\"\n      />\n    </div>\n  );\n};\n\nexport default Arrows;\n"
  },
  {
    "path": "src/Slideshow.css",
    "content": ".slideshow-container {\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.slides {\r\n  position: relative;\r\n  height: 100%;\r\n  padding: 0px;\r\n  margin: 0px;\r\n  list-style-type: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.slide {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  opacity: 0;\r\n  z-index: 1;\r\n  padding: 0;\r\n  margin: 0;\r\n  background-repeat: no-repeat;\r\n  background-size: cover;\r\n  background-position: center;\r\n}\r\n\r\n.showing-none {\r\n  opacity: 1;\r\n  z-index: 2;\r\n}\r\n\r\n.showing-fade {\r\n  opacity: 1;\r\n  z-index: 2;\r\n  animation-duration: 1s;\r\n  animation-name: slide-fade;\r\n}\r\n\r\n@keyframes slide-fade {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n.showing-right {\r\n  opacity: 1;\r\n  animation-duration: 1s;\r\n  animation-name: slide-right;\r\n}\r\n\r\n@keyframes slide-right {\r\n  from {\r\n    left: -50%;\r\n  }\r\n\r\n  to {\r\n    left: 0;\r\n  }\r\n}\r\n\r\n.showing-left {\r\n  opacity: 1;\r\n  animation-duration: 1s;\r\n  animation-name: slide-left;\r\n}\r\n\r\n@keyframes slide-left {\r\n  from {\r\n    left: 100%;\r\n  }\r\n\r\n  to {\r\n    left: 0;\r\n  }\r\n}\r\n\r\n.showing-top {\r\n  opacity: 1;\r\n  animation-duration: 1s;\r\n  animation-name: slide-top;\r\n}\r\n\r\n@keyframes slide-top {\r\n  from {\r\n    top: 100%;\r\n  }\r\n\r\n  to {\r\n    top: 0;\r\n  }\r\n}\r\n\r\n.showing-bottom {\r\n  opacity: 1;\r\n  animation-duration: 1s;\r\n  animation-name: slide-bottom;\r\n}\r\n\r\n@keyframes slide-bottom {\r\n  from {\r\n    top: -100%;\r\n  }\r\n\r\n  to {\r\n    top: 0;\r\n  }\r\n}\r\n\r\n.showing-bounce-left {\r\n  opacity: 1;\r\n  animation-duration: 1s;\r\n  animation-name: slide-bounce-left;\r\n}\r\n\r\n@keyframes slide-bounce-left {\r\n  0% {\r\n    left: 100%;\r\n  }\r\n  50% {\r\n    left: -20%;\r\n  }\r\n  100% {\r\n    left: 0;\r\n  }\r\n}\r\n\r\n.showing-bounce-right {\r\n  opacity: 1;\r\n  animation-duration: 1s;\r\n  animation-name: slide-bounce-right;\r\n}\r\n\r\n@keyframes slide-bounce-right {\r\n  0% {\r\n    left: -100%;\r\n  }\r\n  50% {\r\n    left: 20%;\r\n  }\r\n  100% {\r\n    left: 0;\r\n  }\r\n}\r\n\r\n.show-index.is-text {\r\n  color: #fff;\r\n  position: absolute;\r\n  bottom: 0;\r\n  z-index: 100;\r\n  left: 50%;\r\n  font-size: 28px;\r\n  font-family: 'Slabo 27px', serif;\r\n}\r\n\r\n.show-index.is-dot {\r\n  color: #fff;\r\n  position: absolute;\r\n  bottom: 0;\r\n  z-index: 100;\r\n  left: 50%;\r\n  font-size: 28px;\r\n  font-family: 'Slabo 27px', serif;\r\n  display: flex;\r\n  transform: translate(-50%);\r\n}\r\n\r\n.show-index.is-dot .dot {\r\n  width: 10px;\r\n  height: 10px;\r\n  margin: 0 3px 3rem 3px;\r\n  background-color: white;\r\n  border-radius: 50%;\r\n  opacity: 0.5;\r\n}\r\n\r\n.show-index.is-dot .dot.is-active {\r\n  opacity: 1;\r\n}\r\n\r\n.slideshow-container button:focus {\r\n  outline: none;\r\n}\r\n\r\n.btn-arrow {\r\n  color: transparent;\r\n  display: block;\r\n  font-size: 5px;\r\n  line-height: 0;\r\n  -moz-transition: all 0.3s;\r\n  -o-transition: all 0.3s;\r\n  -webkit-transition: all 0.3s;\r\n  transition: all 0.3s;\r\n  position: absolute;\r\n  top: 50%;\r\n  z-index: 10;\r\n  cursor: pointer;\r\n  height: 50px;\r\n  width: 50px;\r\n  border-radius: 50%;\r\n  padding: 5px;\r\n  z-index: 10000;\r\n}\r\n\r\n.btn-arrow:hover,\r\n.btn-arrow:focus {\r\n  background: rgba(256, 256, 256, 0.1);\r\n}\r\n\r\n.btn-arrow:hover::before,\r\n.btn-arrow:hover::after,\r\n.btn-arrow:focus::before,\r\n.btn-arrow:focus::after {\r\n  background: rgba(256, 256, 256, 0.5);\r\n}\r\n\r\n.btn-arrow::before {\r\n  content: '';\r\n  display: block;\r\n  background: rgba(256, 256, 256, 0.6);\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 6em;\r\n  height: 2em;\r\n}\r\n\r\n.btn-arrow::after {\r\n  content: '';\r\n  display: block;\r\n  background: rgba(256, 256, 256, 0.6);\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 2em;\r\n  height: 6em;\r\n}\r\n.btn-arrow.btn-arrow-left {\r\n  -moz-transform: rotate(-45deg);\r\n  -ms-transform: rotate(-45deg);\r\n  -webkit-transform: rotate(-45deg);\r\n  transform: rotate(-45deg);\r\n  left: 5%;\r\n}\r\n.btn-arrow.btn-arrow-left::before,\r\n.btn-arrow.btn-arrow-left::after {\r\n  top: 18px;\r\n  left: 18px;\r\n}\r\n.btn-arrow.btn-arrow-right {\r\n  -moz-transform: rotate(135deg);\r\n  -ms-transform: rotate(135deg);\r\n  -webkit-transform: rotate(135deg);\r\n  transform: rotate(135deg);\r\n  right: 5%;\r\n}\r\n.btn-arrow.btn-arrow-right::before,\r\n.btn-arrow.btn-arrow-right::after {\r\n  top: 18px;\r\n  left: 18px;\r\n}\r\n"
  },
  {
    "path": "src/index.js",
    "content": "import React, { Component } from 'react';\r\nimport Arrows from './Arrows.js';\r\nimport './Slideshow.css';\r\n\r\nclass Slideshow extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      currentSlide: props.defaultIndex,\r\n      slideInterval: props.slideInterval,\r\n      showIndex: props.showIndex,\r\n      useDotIndex: props.useDotIndex,\r\n      showArrows: props.showArrows,\r\n      effect: props.effect,\r\n      autoplay: props.autoplay,\r\n      enableKeyboard: props.enableKeyboard,\r\n      slides: props.slides.length > 0 ? props.slides : props.children\r\n    };\r\n\r\n    this.runSlideShow = this.runSlideShow.bind(this);\r\n    this.autoSlideshow = this.autoSlideshow.bind(this);\r\n    this.restartSlideshow = this.restartSlideshow.bind(this);\r\n    this.increaseCount = this.increaseCount.bind(this);\r\n    this.decreaseCount = this.decreaseCount.bind(this);\r\n    this.handleKeyboard = this.handleKeyboard.bind(this);\r\n  }\r\n\r\n  componentDidMount() {\r\n    if (this.state.autoplay) this.runSlideShow();\r\n\r\n    if (this.state.enableKeyboard)\r\n      document.addEventListener('keydown', this.handleKeyboard);\r\n  }\r\n\r\n  handleKeyboard(e) {\r\n    e.keyCode === 37\r\n      ? this.decreaseCount()\r\n      : e.keyCode === 39 ? this.increaseCount() : null;\r\n  }\r\n\r\n  runSlideShow() {\r\n    let intervalId = setInterval(this.autoSlideshow, this.state.slideInterval);\r\n    this.setState({\r\n      intervalId\r\n    });\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    clearInterval(this.state.intervalId);\r\n    document.removeEventListener('keydown', this.handleKeyboard);\r\n  }\r\n\r\n  autoSlideshow() {\r\n    this.setState({\r\n      currentSlide: (this.state.currentSlide + 1) % this.state.slides.length\r\n    });\r\n  }\r\n\r\n  restartSlideshow() {\r\n    clearInterval(this.state.intervalId);\r\n    this.runSlideShow();\r\n  }\r\n\r\n  increaseCount() {\r\n    this.state.effect === 'left'\r\n      ? this.setState({\r\n          effect: 'right'\r\n        })\r\n      : this.state.effect === 'bounce-left'\r\n        ? this.setState({\r\n            effect: 'bounce-right'\r\n          })\r\n        : null;\r\n\r\n    this.state.autoplay ? this.restartSlideshow() : null;\r\n    this.setState({\r\n      currentSlide: (this.state.currentSlide + 1) % this.state.slides.length\r\n    });\r\n  }\r\n\r\n  decreaseCount() {\r\n    this.state.effect === 'right'\r\n      ? this.setState({\r\n          effect: 'left'\r\n        })\r\n      : this.state.effect === 'bounce-right'\r\n        ? this.setState({\r\n            effect: 'bounce-left'\r\n          })\r\n        : null;\r\n\r\n    this.state.autoplay ? this.restartSlideshow() : null;\r\n\r\n    let currentSlide;\r\n    currentSlide =\r\n      this.state.currentSlide === 0\r\n        ? this.state.slides.length - 1\r\n        : (currentSlide = this.state.currentSlide - 1);\r\n    this.setState({\r\n      currentSlide\r\n    });\r\n  }\r\n\r\n  render() {\r\n    const { slides, showIndex, useDotIndex, effect, showArrows } = this.state;\r\n\r\n    let slideEffect = effect === undefined ? 'fade' : effect;\r\n    let slideShowSlides;\r\n    let slideShowIndex;\r\n\r\n    if (!this.props.children) {\r\n      slideShowSlides = slides.map((slide, i) => {\r\n        return (\r\n          <li\r\n            className={`slide ${effect} ${\r\n              this.state.currentSlide === i ? 'showing-' + slideEffect : ''\r\n            }`}\r\n            key={i}\r\n            style={{ backgroundImage: `url(${slide})` }}\r\n          />\r\n        );\r\n      });\r\n    } else {\r\n      slideShowSlides = slides.map((slide, i) => {\r\n        return (\r\n          <li\r\n            className={`slide ${effect} ${\r\n              this.state.currentSlide === i ? 'showing-' + slideEffect : ''\r\n            }`}\r\n            key={i}\r\n          >\r\n            {slide}\r\n          </li>\r\n        );\r\n      });\r\n    }\r\n\r\n    if (useDotIndex) {\r\n      slideShowIndex = (\r\n        <div className=\"show-index is-dot\">\r\n          {slides.map((slide, i) => {\r\n            return (\r\n              <span\r\n                className={`dot ${\r\n                  this.state.currentSlide === i ? 'is-active' : ''\r\n                }`}\r\n                key={`dot${i}`}\r\n              />\r\n            );\r\n          })}\r\n        </div>\r\n      );\r\n    } else {\r\n      slideShowIndex = (\r\n        <div className=\"show-index is-text\">\r\n          <p>{`${this.state.currentSlide + 1} / ${slides.length}`}</p>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <div\r\n        style={{\r\n          position: 'absolute',\r\n          height: this.props.height || '100%',\r\n          width: this.props.width || '100%'\r\n        }}\r\n      >\r\n        <div className=\"slideshow-container\">\r\n          <ul className=\"slides\">{slideShowSlides}</ul>\r\n\r\n          {showArrows && (\r\n            <Arrows\r\n              decreaseCount={this.decreaseCount}\r\n              increaseCount={this.increaseCount}\r\n            />\r\n          )}\r\n\r\n          {showIndex && slideShowIndex}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nSlideshow.defaultProps = {\r\n  showIndex: false,\r\n  showArrows: true,\r\n  autoplay: true,\r\n  enableKeyboard: true,\r\n  useDotIndex: false,\r\n  slideInterval: 2000,\r\n  defaultIndex: 0,\r\n  effect: 'fade',\r\n  slides: [],\r\n  height: '100%',\r\n  width: '100%'\r\n};\r\n\r\nexport default Slideshow;\r\n"
  },
  {
    "path": "webpack.config.js",
    "content": "var path = require('path');\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'build'),\n    filename: 'index.js',\n    libraryTarget: 'commonjs2'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        include: path.resolve(__dirname, 'src'),\n        exclude: /(node_modules|bower_components|build)/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            presets: ['env']\n          }\n        }\n      },\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']\n      }\n    ]\n  },\n  externals: {\n    react: 'commonjs react'\n  }\n};\n"
  }
]