[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\n    \"@babel/preset-env\",\n    \"@babel/preset-react\"\n  ],\n  \"plugins\": [\n    \"@babel/plugin-proposal-class-properties\"\n  ]\n}\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"rules\": {\n    \"no-extra-parens\": 0,\n    \"react/jsx-uses-vars\": 1,\n    \"strict\": 0,\n    \"no-underscore-dangle\": 0,\n    \"space-infix-ops\": 0,\n    \"no-alert\": 0,\n    \"react/prop-types\": 0,\n    \"react/no-find-dom-node\": 0,\n    \"react/display-name\": 0,\n    \"no-console\": 0,\n    \"no-prototype-builtins\": 0\n  },\n  \"env\": {\n    \"node\": true,\n    \"browser\": true,\n    \"es6\": true,\n    \"jasmine\": true\n  },\n  \"parser\": \"@babel/eslint-parser\",\n  \"parserOptions\": {\n    \"requireConfigFile\": false\n  },\n  \"plugins\": [\n    \"react\",\n    \"import\"\n  ],\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:import/errors\",\n    \"plugin:react/recommended\"\n  ]\n}"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "github: akiran\nopen_collective: react-slick\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE.md",
    "content": "<!-- Love react-slick? Please consider supporting our collective:\n👉  https://opencollective.com/react-slick/donate -->\n\n### Guidelines for posting a new issue\n\n* Please replicate your issue with this [CodeSandBox](https://codesandbox.io/s/ppwkk5l6xx) and provide a link to it along with the issue description\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\nbower_components\n.sass-cache\nbuild\ndemos/*\ndemos1\nTODO.md\nnpm-debug.log\nlib\n*.sublime-*\n.idea\ndist\nyarn.lock\n.vscode\nexampleslib\nexamples/scripts/configs.json\njquery.html\ndocs/fonts/\ndocs/ajax-loader.gif\npackage-lock.json\n.DS_Store\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\nsrc-jsx\n"
  },
  {
    "path": ".npmignore",
    "content": "bower_components\n.sass-cache\nbuild\ndemos\ndemos1\nTODO.md\ntest\ntestlib\nbower.json\ngulpfile.js\nkarma.conf.js\nLICENSE\nwebpack.config.dist.js\nwebpack.config.js\nISSUE_TEMPLATE.md\n"
  },
  {
    "path": ".prettierrc",
    "content": "trailingComma: none"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\n\nnode_js:\n  - \"stable\"\n\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Change Log\n\n## [Unreleased](https://github.com/akiran/react-slick/tree/HEAD)\n\n## 0.22.0\n\n**Release Changes**\n\n- Internal Changes\n  - converted InnerSlider from createReactClass object to ES6 class\n  - removed all the mixins, created classMethods and pure utility functions instead\n  - changed autoplay from setTimeout to setInterval\n  - added images onload handlers to update dynamically\n  - added autoplaying state for the betterment of autoplay and pause\n  - removed usage of assign or Object.assign, using object spreading instead\n  - implemented effects of touchMove props\n  - fixed transition in opposite direction in case of continuous scrolling\n  - added separate onclick event listener for images\n  - added missing classes `regular` and `slider`\n  - renamed events\n    - edgeEvent => onEdge\n    - init => onInit\n    - reInit => onReInit\n  - implemented `pauseOnDotsHover` property\n  - implemented Progressive LazyLoad property, lazyLoad is now ondemand/progressive\n  - implemented lazyloadError event\n  - implemented useTransform property\n  - implemented pauseOnFocus property\n  - added resize observer to update on slider resize\n\n- Bug Fixes\n  - dynamic track updates on image load\n  - fixed slickPause and autoPlay issues (paused slider would resume autoplay sometime)\n  - fixed trackStyle update on window resize\n  - fixed NodeList forEach problem for chrome 51 or below\n  - fixed bugs due to uncleared callback timers\n  - fixed update issues on just slider resize\n\n\n## 0.21.0\n\n**Release Changes**\n\n- Fixed issues\n  - dataset undefined error in case of swipeToSlide but finite slides\n  - slideWidth issue by transform scale\n  - variableWidth + finite alignment problems\n  - wrapper direction rtl issues\n  - added onload update handler for images\n  - fixed breaking of animation on setState\n\n- Mixins to Pure Functions\n  - getWidth, getHeight\n  - swipeDirection\n  - initialize, update\n\n- Other Changes\n  - removed sass, using pure CSS instead\n  - enforced dir='ltr' in the slider, so dir='rtl' in wrapper doesn't break the slider\n  - corrected up/down direction conventions\n  - added more tests along with snapshots\n\n## 0.20.0\n\n**Release Changes**\n\n- handled responsive breakpoint collision\n- renamed autoPlayTimer to autoplayTimer and removed it from state\n- changed es5 module.exports with es6 export default in src/index\n- implemented slider syncing with asNavFor prop\n- made all the slides untabbable\n- implemented getSlick method as in slick\n- implemented slickGetOption method\n- implemented lazyLoaded event\n- implemented reInit event\n- implemented onSwipe event and documented edgeEvent\n\n\n## 0.19.0\n\n**Release Changes**\n\nFollowing are the changes to be mentioned:\n\n- fixed slideWidth calculation approximation\n- fixed unusual scrolls in focusOnSelect mode\n- added appendDots method for customization of dots\n- modified logic for handling odd/even cases where there were unusual scrolls in opposite direction\n- implemented unslick feature properly\n- fixed variableWidth issues like blank spaces at edges, improper alignment\n- handling focus loss in case of fade=true\n- responsive lazyloading bug fixed\n- increased verticalswiping resistance from 4 to 10\n\n\n## 0.18.0\n\n**Major Changes:**\n\n- `centerPadding` prop now accepts % value as well\n- Fixed dots count in certain cases, where it was wrong\n- Fixed fade property mess-up on click\n- Fixed invisibility issue when fade & vertical are true\n- Modified logic for updating lazyLoadedList, earlier there were some whitespaces at ends, now they're gone\n- Fixed getTrackLeft issue for slideCount=1\n\n\n## 0.17.1\n\n**Major Changes**\n\n* Enforced some settings in specific configurations like:\n  - `slidesToScroll = 1` *when fade is true*\n  - `slidesToScroll = 1` *when centerMode is true*\n  - `slidesToShow = 1` *when fade is true*\n\n* Changed the number of clones (preclones and postclones), that fixed couple of issues like blank spaces after last slide and/or before first slide which occurred in several cases.\n\n\n**Minor Changes**\n\n- Rich amount of tests and test-utilities added\n- Additional documentation comments added\n- Refactored small snippets for betterment\n- Fixed several lazyload and centerMode bugs\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contribute\n\n## Introduction\n\nFirst, thank you for considering contributing to react-slick! It's people like you that make the open source community such a great community! 😊\n\nWe welcome any type of contribution, not only code. You can help with\n- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)\n- **Marketing**: writing blog posts, howto's, printing stickers, ...\n- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...\n- **Code**: take a look at the [open issues](https://github.com/akiran/react-slick/issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. To get started you can also [sign up to triage react-slick issues on CodeTriage](https://www.codetriage.com/akiran/react-slick).\n- **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-slick).\n\n## Your First Contribution\n\nWorking on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).\n\n## Submitting code\n\nAny code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.\n\n## Code review process\n\nThe bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.\nIt is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?\n\n## Financial contributions\n\nWe also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-slick).\nAnyone can file an expense. If the expense makes sense for the development of the community, it will be \"merged\" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.\n\n## Questions\n\nIf you have any questions, create an [issue](https://github.com/akiran/react-slick/issues) (protip: do a quick search first to see if someone else didn't ask the same question before!).\nYou can also reach us at hello@react-slick.opencollective.com.\n\n## Credits\n\n### Contributors\n\nThank you to all the people who have already contributed to react-slick!\n<a href=\"https://github.com/akiran/react-slick/graphs/contributors\"><img src=\"https://opencollective.com/react-slick/contributors.svg?width=890\" /></a>\n\n\n### Backers\n\nThank you to all our backers! [[Become a backer](https://opencollective.com/react-slick#backer)]\n\n<a href=\"https://opencollective.com/react-slick#backers\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/backers.svg?width=890\"></a>\n\n\n### Sponsors\n\nThank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/react-slick#sponsor))\n\n<a href=\"https://opencollective.com/react-slick/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/0/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/1/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/1/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/2/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/2/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/3/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/3/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/4/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/4/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/5/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/5/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/6/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/6/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/7/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/7/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/8/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/8/avatar.svg\"></a>\n<a href=\"https://opencollective.com/react-slick/sponsor/9/website\" target=\"_blank\"><img src=\"https://opencollective.com/react-slick/sponsor/9/avatar.svg\"></a>\n\n<!-- This `CONTRIBUTING.md` is based on @nayafia's template https://github.com/nayafia/contributing-template -->\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2014 Kiran Abburi\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\n"
  },
  {
    "path": "README.md",
    "content": "### react-slick\n\n[![Backers on Open Collective](https://opencollective.com/react-slick/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-slick/sponsors/badge.svg)](#sponsors)\n\n##### Carousel component built with React. It is a react port of [slick carousel](http://kenwheeler.github.io/slick/)\n\n## [Documentation](http://react-slick.neostack.com)\n\n### Installation\n\n**npm**\n\n```bash\nnpm install react-slick --save\n```\n\n**yarn**\n\n```bash\nyarn add react-slick\n```\n\n**Also install slick-carousel for css and font**\n\n```bash\nnpm install slick-carousel\n\n// Import css files\nimport \"slick-carousel/slick/slick.css\";\nimport \"slick-carousel/slick/slick-theme.css\";\n```\n\nor add cdn link in your html\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  charset=\"UTF-8\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css\"\n/>\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css\"\n/>\n```\n\n### [PlayGround](https://stackblitz.com/edit/vitejs-vite-ownrun?file=src%2FImageSlider.jsx)\n\n### Example\n\n```js\nimport React from \"react\";\nimport Slider from \"react-slick\";\n\nexport default function SimpleSlider() {\n  var settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1\n  };\n  return (\n    <Slider {...settings}>\n      <div>\n        <h3>1</h3>\n      </div>\n      <div>\n        <h3>2</h3>\n      </div>\n      <div>\n        <h3>3</h3>\n      </div>\n      <div>\n        <h3>4</h3>\n      </div>\n      <div>\n        <h3>5</h3>\n      </div>\n      <div>\n        <h3>6</h3>\n      </div>\n    </Slider>\n  );\n}\n```\n\n### Props\n\nFor all available props, go [here](https://react-slick.neostack.com/docs/api/).\n\n### Methods\n\nFor all available methods, go [here](https://react-slick.neostack.com/docs/api#methods)\n\n### Development\n\nWant to run demos locally\n\n```bash\ngit clone https://github.com/akiran/react-slick\ncd react-slick\nnpm install\nnpm start\nopen http://localhost:8080\n```\n\n## Community\n\nJoin our [discord channel](https://discord.gg/z7stRE4Cyb) to discuss react-slick bugs and ask for help\n\n## Contributing\n\nPlease see the [contributing guidelines](./CONTRIBUTING.md)\n"
  },
  {
    "path": "__tests__/SimpleSlider.test.js",
    "content": "// includes tests of\n// SimpleSlider, MultipleItems\nimport { testSlider } from \"./testUtils\";\n\ndescribe(\"SimpleSlider with combinations of possibilities\", function() {\n  // try around several possibilities\n  let _noOfSlides = [2, 5, 12];\n  let _slidesToShow = [2, 5, 10];\n  let _slidesToScroll = [1, 2, 3, 10];\n  if (true) {\n    // for switching real quick to lesser/easier tests for simplicity\n    _noOfSlides = [5];\n    _slidesToShow = [2];\n    _slidesToScroll = [1, 2];\n  }\n\n  for (let noOfSlides of _noOfSlides) {\n    for (let slidesToShow of _slidesToShow) {\n      for (let slidesToScroll of _slidesToScroll) {\n        // following restrictions may not be 100% correct, and there may be more restrictions\n        if (slidesToShow > noOfSlides || slidesToScroll > slidesToShow) {\n          continue;\n        }\n        if (noOfSlides === slidesToShow) {\n          // temporary, jquery slick disables arrows in this case, so the tests fail\n          continue;\n        }\n        if (slidesToShow === slidesToScroll) {\n          // temporary, active-class is not being assigned properly, so tests fail\n          continue;\n        }\n        const settings1 = {\n          infinite: true,\n          speed: 0,\n          noOfSlides,\n          slidesToShow,\n          slidesToScroll,\n          useCSS: false\n        };\n        test(`Test with settings => noOfSlides: ${noOfSlides}, slidesToShow: ${slidesToShow}, slidesToScroll: ${slidesToScroll}`, function() {\n          testSlider(settings1);\n        });\n      }\n    }\n  }\n});\n"
  },
  {
    "path": "__tests__/TestComponents.js",
    "content": "import React from \"react\";\nimport Slider from \"../src/index\";\n\nexport function GenericSliderComponent({ slidesCount, settings }) {\n  const slides = [...Array(slidesCount).keys()].map(item => (\n    <div key={item}>{item + 1}</div>\n  ));\n  return <Slider {...settings}>{slides}</Slider>;\n}\n\ntest(\"fake test\", () => {\n  expect(1).toBe(1);\n});\n"
  },
  {
    "path": "__tests__/afterChange.test.js",
    "content": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport Slider from \"../src/index\";\nimport {\n  getActiveSlide,\n  clickNext,\n  clickPrevious,\n  getCurrentSlide\n} from \"../test-utils\";\n\nclass SliderWithAfterChange extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      currentSlide: null\n    };\n    this.afterChange = this.afterChange.bind(this);\n  }\n\n  afterChange(currentSlide) {\n    console.log(currentSlide, \"afterChange\");\n    this.setState({\n      currentSlide\n    });\n  }\n  render() {\n    return (\n      <Slider afterChange={this.afterChange}>\n        <div>slide1</div>\n        <div>slide2</div>\n        <div>slide3</div>\n        <div>slide4</div>\n      </Slider>\n    );\n  }\n}\n\ndescribe(\"After change Slider\", function() {\n  it(\"should render\", function() {\n    const { container } = render(<SliderWithAfterChange />);\n    clickNext(container);\n    setTimeout(() => {\n      expect(getActiveSlide(container).textContent).toEqual(\"slide2\");\n    }, 1000);\n    clickNext(container);\n    setTimeout(() => {\n      expect(getActiveSlide(container).textContent).toEqual(\"slide3\");\n    }, 1000);\n    clickPrevious(container);\n    setTimeout(() => {\n      expect(getActiveSlide(container).textContent).toEqual(\"slide2\");\n    }, 1000);\n  });\n});\n"
  },
  {
    "path": "__tests__/arrows.js",
    "content": "/**\n * Arrow component tests\n */\n\nsinon.stub(console, \"error\");\n\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\nimport sinon from \"sinon\";\n\nimport { NextArrow, PrevArrow } from \"../src/arrows\";\n\nfunction CustomArrow(props) {\n  return (\n    <span\n      className=\"sample\"\n      data-currentSlide={props.currentSlide}\n      data-slideCount={props.slideCount}\n    />\n  );\n}\n\ndescribe(\"Previous arrows\", () => {\n  it(\"should render arrow\", () => {\n    const { container } = render(<PrevArrow />);\n    expect(Array.from(container.getElementsByTagName(\"button\"))).toHaveLength(\n      1\n    );\n  });\n\n  it(\"should not result in errors\", () => {\n    render(<PrevArrow />);\n\n    expect(console.error.called).toBe(false);\n  });\n\n  //  it('should pass slide data to custom arrow', () => {\n  //    let elAttributes;\n  //    let arr = <CustomArrow />\n\n  //    const {container}= render(<PrevArrow currentSlide={3} prevArrow={arr} slideCount={5} />);\n\n  //    elAttributes =x=> container.querySelectorAll('.sample')[0].getAttribute(x);\n  //    expect(elAttributes('data-currentslide')).toBe('3');\n  //    expect(elAttributes('data-slidecount')).toBe('5');\n  //  });\n});\n\ndescribe(\"Next arrows\", () => {\n  it(\"should render arrow\", () => {\n    const { container } = render(<NextArrow />);\n    expect(Array.from(container.getElementsByTagName(\"button\"))).toHaveLength(\n      1\n    );\n  });\n\n  //  it('should not result in errors', () => {\n  //    render(<NextArrow />);\n\n  //    expect(console.error.called).toBe(false);\n  //  });\n\n  //  it('should pass slide data to custom arrow', () => {\n  //    let elAttributes;\n  //    let arr = <CustomArrow />\n\n  //    const {container} = render(<NextArrow currentSlide={6} nextArrow={arr} slideCount={9} />);\n\n  //    elAttributes =(x)=> container.querySelectorAll('.sample')[0].getAttribute(x);\n  //    expect(elAttributes('data-currentslide')).toBe('6');\n  //    expect(elAttributes('data-slidecount')).toBe('9');\n  //  });\n});\n"
  },
  {
    "path": "__tests__/beforeChange.test.js",
    "content": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Slider from \"../src/index\";\nimport {\n  getActiveSlide,\n  clickNext,\n  clickPrevious,\n  getCurrentSlide\n} from \"../test-utils\";\n\nclass SliderWithBeforeChange extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      currentSlide: null,\n      nextSlide: null\n    };\n    this.beforeChange = this.beforeChange.bind(this);\n  }\n  beforeChange(currentSlide, nextSlide) {\n    this.setState({\n      currentSlide,\n      nextSlide\n    });\n  }\n  render() {\n    return (\n      <Slider waitForAnimate={false} beforeChange={this.beforeChange}>\n        <div>slide1</div>\n        <div>slide2</div>\n        <div>slide3</div>\n        <div>slide4</div>\n      </Slider>\n    );\n  }\n}\n\ndescribe(\"Slider\", function() {\n  it(\"should render\", function() {\n    const { container } = render(<SliderWithBeforeChange />);\n    clickNext(container);\n    expect(getActiveSlide(container).textContent).toEqual(\"slide2\");\n    clickNext(container);\n    expect(getActiveSlide(container).textContent).toEqual(\"slide3\");\n    clickPrevious(container);\n    expect(getActiveSlide(container).textContent).toEqual(\"slide2\");\n  });\n});\n"
  },
  {
    "path": "__tests__/lazyLoad.test.js",
    "content": "import { render } from \"@testing-library/react\";\nimport assign from \"object-assign\";\nimport { getRequiredLazySlides } from \"../src/utils/innerSliderUtils\";\nimport {\n  createInnerSliderWrapper,\n  clickNext,\n  clickPrev,\n  tryAllConfigs\n} from \"./testUtils\";\n\n// const testSettings = settings => {\n//   let {container} = createInnerSliderWrapper(settings);\n//   for (let click = 0; click < settings.noOfSlides + 2; click++) {\n//     let lazyLoadedList = slider.state().lazyLoadedList;\n//     let expectedLazyLoadedList = getRequiredLazySlides(\n//       assign({}, slider.props(), slider.state())\n//     );\n//     expectedLazyLoadedList.forEach(slide => {\n//       expect(lazyLoadedList.indexOf(slide) >= 0).toEqual(true);\n//     });\n//     clickNext(slider);\n//   }\n\n//   slider = createInnerSliderWrapper(settings);\n//   for (let click = 0; click < settings.noOfSlides + 2; click++) {\n//     let lazyLoadedList = slider.state().lazyLoadedList;\n//     let expectedLazyLoadedList = getRequiredLazySlides(\n//       assign({}, slider.props(), slider.state())\n//     );\n//     expectedLazyLoadedList.forEach(slide => {\n//       expect(lazyLoadedList.indexOf(slide) >= 0).toEqual(true);\n//     });\n//     clickPrev(slider);\n//   }\n\n//   slider = createInnerSliderWrapper(settings);\n//   for (let click = 0; click < settings.noOfSlides + 2; click++) {\n//     let lazyLoadedList = slider.state().lazyLoadedList;\n//     lazyLoadedList.forEach(slideIndex => {\n//       expect(\n//         slider.find(`[data-index=${slideIndex}]`).props().children !== undefined\n//       ).toBe(true);\n//     });\n//   }\n// };\n\n// describe(\"LazyLoad test\", () => {\n//   let settings = {\n//     lazyLoad: true,\n//     useCSS: false,\n//     speed: 0,\n//     noOfSlides: [7, 8],\n//     initialSlide: [0, 5],\n//     slidesToShow: [1, 3, 4],\n//     slidesToScroll: [1, 3],\n//     centerMode: [true, false]\n//   };\n//   let settingsList = [];\n//   tryAllConfigs(settings, settingsList);\n//   // shuffle the list\n//   settingsList.sort(() => 0.5 - Math.random());\n//   settingsList.forEach((settings, index) => {\n//     if (Math.random() < 0.5) {\n//       test(`Testing config no. ${index}`, () => testSettings(settings));\n//     }\n//   });\n// });\n"
  },
  {
    "path": "__tests__/observations.json",
    "content": "{\n  \"jQueryTest\": [\n    {\n      \"observation\": \"Clicks on arrows are not working properly\",\n      \"possibleCause\": \"Animation effects are taking effects somehow\",\n      \"solutions\": [\n        {\n          \"description\": \"set useCSS property to false\",\n          \"status\": \"did not work\"\n        },\n        {\n          \"description\": \"set speed property to 0\",\n          \"status\": \"worked, now the clicks are working as of now\"\n        }\n      ]\n    },\n    {\n      \"observation\": \"arrows are disabled when slidesToShow are equal to noOfSlides\",\n      \"status\": \"causes few tests to fail\"\n    },\n    {\n      \"observation\": \"tests are very slow\",\n      \"possibleCause\": \"synchronous click event simulation and slow DOM api\",\n      \"status\": \"not tried yet\"\n    }\n  ],\n  \"reactTest\": [\n    {\n      \"observation\": \"Clicks on arrows are not working properly\",\n      \"possibleCause\": \"Animation effects are taking effects somehow\",\n      \"solutions\": [\n        {\n          \"description\": \"set useCSS property to false\",\n          \"status\": \"worked, now the clicks are working as of now\"\n        }\n      ]\n    }\n  ],\n  \"misc\": [\n    {\n      \"observation\": \"In case of reverse scrolling, slick-active class is not being assigned properly.\",\n      \"example\": {\n        \"settings\": {\n          \"noOfSlides\": 5,\n          \"slidesToShow\": 2,\n          \"slidesToScroll\": 2\n        },\n        \"jqueryBehaviour\": \"after one prev click, current-slide is 5th and active-class is assigned to slide 4th and 5th while the same are displayed in frame\",\n        \"reactBehaviour\": \"after one prev click, current-slide is 5th and active-class is assigned to slide 5th and 1st(cloned) while 4th and 5th are displayed in frame\",\n        \"status\": \"several tests are failing due to this property\"\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": "__tests__/regression/fix-1813.test.js",
    "content": "//Test fix of #1813: In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not working.\n// Reversed the fix for #1813 to match the slick carousel functionality. When slides <= slidesToShow, unslick will be activated\n\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\n\nimport {\n  clickNext,\n  clickPrevious,\n  getActiveButton,\n  getActiveSlidesCount,\n  getActiveSlidesText,\n  getButtons,\n  getButtonsLength,\n  getClonesCount,\n  getCurrentSlide,\n  getSlidesCount,\n  hasArrows,\n  hasDots\n} from \"../../test-utils\";\nimport { GenericSliderComponent } from \"../TestComponents\";\n\nfunction MultipleItems() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 9,\n    slidesToScroll: 3\n  };\n  return <GenericSliderComponent slidesCount={9} settings={settings} />;\n}\n\ndescribe(\"Multiple Items with slidesToShow = slides count in infinite mode\", function() {\n  it(\"should have 9 active slides\", function() {\n    const { container } = render(<MultipleItems />);\n    expect(getActiveSlidesCount(container)).toEqual(9);\n  });\n  it(\"should show first 9 slides\", function() {\n    const { container } = render(<MultipleItems />);\n    //expect(getActiveButton(container)).toEqual([\"1\"]);\n    expect(getActiveSlidesText(container)).toEqual([\n      \"1\",\n      \"2\",\n      \"3\",\n      \"4\",\n      \"5\",\n      \"6\",\n      \"7\",\n      \"8\",\n      \"9\"\n    ]);\n  });\n  it(\"shouldn't have any arrows\", () => {\n    const { container } = render(<MultipleItems />);\n    expect(hasArrows(container)).toEqual(false);\n  });\n  it(\"shouldn't have any dots\", () => {\n    const { container } = render(<MultipleItems />);\n    expect(hasDots(container)).toEqual(false);\n  });\n  // it(\"should have 0 dots\", function() {\n  //   const { container } = render(<MultipleItems />);\n  //   expect(getButtonsLength(container)).toEqual(0);\n  // });\n  // it(\"should show slides from 4 when next button is clicked\", function() {\n  //   const { container } = render(<MultipleItems />);\n  //   clickNext(container);\n  //   expect(getActiveButton(container)).toEqual([\"2\"]);\n  //   expect(getActiveSlidesText(container)).toEqual([\n  //     \"4\",\n  //     \"5\",\n  //     \"6\",\n  //     \"7\",\n  //     \"8\",\n  //     \"9\",\n  //     \"1\",\n  //     \"2\",\n  //     \"3\"\n  //   ]);\n  // });\n  // it(\"should show slides from 7 when previous button is clicked\", function() {\n  //   const { container } = render(<MultipleItems />);\n  //   clickPrevious(container);\n  //   expect(getActiveButton(container)).toEqual([\"3\"]);\n  //   expect(getActiveSlidesText(container)).toEqual([\n  //     \"7\",\n  //     \"8\",\n  //     \"9\",\n  //     \"1\",\n  //     \"2\",\n  //     \"3\",\n  //     \"4\",\n  //     \"5\",\n  //     \"6\"\n  //   ]);\n  // });\n  // it(\"should show slides first 9 slides when first dot is clicked\", function() {\n  //   const { container } = render(<MultipleItems />);\n  //   fireEvent(\n  //     getButtons(container)[0],\n  //     new MouseEvent(\"click\", {\n  //       bubbles: true,\n  //       cancelable: true\n  //     })\n  //   );\n  //   expect(getActiveButton(container)).toEqual([\"1\"]);\n  //   expect(getActiveSlidesText(container)).toEqual([\n  //     \"1\",\n  //     \"2\",\n  //     \"3\",\n  //     \"4\",\n  //     \"5\",\n  //     \"6\",\n  //     \"7\",\n  //     \"8\",\n  //     \"9\"\n  //   ]);\n  // });\n  // it(\"should show slides from 4 when middle dot is clicked\", function() {\n  //   const { container } = render(<MultipleItems />);\n  //   fireEvent(\n  //     getButtons(container)[1],\n  //     new MouseEvent(\"click\", {\n  //       bubbles: true,\n  //       cancelable: true\n  //     })\n  //   );\n  //   expect(getActiveButton(container)).toEqual([\"2\"]);\n  //   expect(getActiveSlidesText(container)).toEqual([\n  //     \"4\",\n  //     \"5\",\n  //     \"6\",\n  //     \"7\",\n  //     \"8\",\n  //     \"9\",\n  //     \"1\",\n  //     \"2\",\n  //     \"3\"\n  //   ]);\n  // });\n  // it(\"should show slides from 7 when last dot is clicked\", function() {\n  //   const { container } = render(<MultipleItems />);\n  //   fireEvent(\n  //     getButtons(container)[2],\n  //     new MouseEvent(\"click\", {\n  //       bubbles: true,\n  //       cancelable: true\n  //     })\n  //   );\n  //   expect(getActiveButton(container)).toEqual([\"3\"]);\n  //   expect(getActiveSlidesText(container)).toEqual([\n  //     \"7\",\n  //     \"8\",\n  //     \"9\",\n  //     \"1\",\n  //     \"2\",\n  //     \"3\",\n  //     \"4\",\n  //     \"5\",\n  //     \"6\"\n  //   ]);\n  // });\n});\n"
  },
  {
    "path": "__tests__/regression/fix-1874.test.js",
    "content": "// Test fix of#1874:  \"slick-current\" is always on first slide despite initialSlide != 0\n\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\n\nimport { getCurrentSlideContent, clickNext } from \"../../test-utils\";\nimport { GenericSliderComponent } from \"../TestComponents\";\n\ndescribe(\"currentSlide test with different initialSlide values\", () => {\n  it(\"currentSlide is 0 when initialSlide is 0\", function() {\n    const { container } = render(<GenericSliderComponent slidesCount={6} />);\n    expect(getCurrentSlideContent(container)).toEqual(\"1\");\n    clickNext(container);\n    expect(getCurrentSlideContent(container)).toEqual(\"2\");\n  });\n\n  it(\"currentSlide is 2 when initialSlide is 2\", function() {\n    const { container } = render(\n      <GenericSliderComponent slidesCount={6} settings={{ initialSlide: 2 }} />\n    );\n    expect(getCurrentSlideContent(container)).toEqual(\"3\");\n    clickNext(container);\n    expect(getCurrentSlideContent(container)).toEqual(\"4\");\n  });\n});\n"
  },
  {
    "path": "__tests__/regression/fix-2315.test.js",
    "content": "// Test fix of #2315: Slider crashing after a state change in parent component\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\n\nimport { getCurrentSlideContent, getSlidesCount } from \"../../test-utils\";\nimport { GenericSliderComponent } from \"../TestComponents\";\n\nfunction TestSlider() {\n  const [count, setCount] = React.useState();\n\n  return (\n    <div>\n      <button className=\"increment-button\" onClick={() => setCount(count + 1)}>\n        Increment {count}\n      </button>\n      <GenericSliderComponent slidesCount={6} settings={{ count }} />\n    </div>\n  );\n}\n\ndescribe(\"State change in parent component of slider\", () => {\n  it(\"Slider shoud work afer clicking on Increment button\", function() {\n    const { container } = render(<TestSlider />);\n    fireEvent(\n      container.getElementsByClassName(\"increment-button\")[0],\n      new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true\n      })\n    );\n    // Throws an error \"Maximum update depth exceeded.\" if the bug exists\n    expect(getCurrentSlideContent(container)).toEqual(\"1\");\n    expect(getSlidesCount(container)).toEqual(8);\n  });\n});\n"
  },
  {
    "path": "__tests__/regression/fix-2414.test.js",
    "content": "// Test fix of #2414: Extra clones in infinite mode when there is only one slide or unslick is true\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\n\nimport {\n  getCurrentSlideContent,\n  getSlidesCount,\n  getActiveSlidesCount,\n  getClonesCount,\n  hasArrows,\n  hasDots\n} from \"../../test-utils\";\nimport { GenericSliderComponent } from \"../TestComponents\";\n\nfunction SliderWithOneSlide() {\n  const settings = {\n    dots: true,\n    infinite: true\n  };\n  return <GenericSliderComponent slidesCount={1} settings={settings} />;\n}\n\nfunction SliderWithUnslick() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    unslick: true\n  };\n  return <GenericSliderComponent slidesCount={2} settings={settings} />;\n}\n\ndescribe(\"Slider with one slide\", function() {\n  it(\"should have 1 active slide\", function() {\n    const { container } = render(<SliderWithOneSlide />);\n    expect(getActiveSlidesCount(container)).toEqual(1);\n  });\n  it(\"should not have any clones\", function() {\n    const { container } = render(<SliderWithOneSlide />);\n    expect(getClonesCount(container)).toEqual(0);\n  });\n  it(\"should no have dots and arrows\", function() {\n    const { container } = render(<SliderWithOneSlide />);\n    expect(hasArrows(container)).toEqual(false);\n    expect(hasDots(container)).toEqual(false);\n  });\n});\n\ndescribe(\"Slider with unslick=true\", function() {\n  it(\"should have one active slide\", function() {\n    const { container } = render(<SliderWithUnslick />);\n    expect(getActiveSlidesCount(container)).toEqual(1);\n  });\n  it(\"should not have any clones\", function() {\n    const { container } = render(<SliderWithUnslick />);\n    expect(getClonesCount(container)).toEqual(0);\n  });\n  it(\"should no have dots and arrows\", function() {\n    const { container } = render(<SliderWithUnslick />);\n    expect(hasArrows(container)).toEqual(false);\n    expect(hasDots(container)).toEqual(false);\n  });\n});\n"
  },
  {
    "path": "__tests__/sliderStyles.test.js",
    "content": "import assign from \"object-assign\";\nimport { getRequiredLazySlides } from \"../src/utils/innerSliderUtils\";\nimport {\n  createInnerSliderWrapper,\n  clickNext,\n  clickPrev,\n  tryAllConfigs,\n  actualTrackLeft,\n  testTrackLeft\n} from \"./testUtils\";\nimport { getTrackLeft } from \"../src/utils/innerSliderUtils\";\n\nconst testSettings = settings => {\n  let slider = createInnerSliderWrapper(settings);\n  for (let click = 0; click < settings.noOfSlides + 2; click++) {\n    testTrackLeft(slider);\n    clickNext(slider);\n  }\n  slider = createInnerSliderWrapper(settings);\n  for (let click = 0; click < settings.noOfSlides + 2; click++) {\n    testTrackLeft(slider);\n    clickPrev(slider);\n  }\n};\n\ndescribe(\"Slider Styles Tests\", () => {\n  let settings = {\n    useCSS: false,\n    speed: 0,\n    centerMode: [true, false],\n    noOfSlides: [7, 8],\n    initialSlide: [0, 5],\n    slidesToShow: [1, 3, 4]\n  };\n  let settingsList = [];\n  tryAllConfigs(settings, settingsList);\n  // shuffle the list\n  settingsList.sort(() => 0.5 - Math.random());\n  settingsList.forEach((settings, index) => {\n    // if (Math.random() < 0.5) {\n    //   test(`Testing config no. ${index}`, () => testSettings(settings));\n    // }\n  });\n});\n"
  },
  {
    "path": "__tests__/testUtils.js",
    "content": "import React from \"react\";\nimport $ from \"jquery\";\nimport assign from \"object-assign\";\nimport { render } from \"@testing-library/react\";\nimport Slider from \"../src/slider\";\nimport { InnerSlider } from \"../src/inner-slider\";\nimport defaultProps from \"../src/default-props\";\nimport * as slickCarousel from \"slick-carousel\"; // defining slick in global environment\nimport { getTrackLeft } from \"../src/utils/innerSliderUtils\";\nimport {\n  getActiveSlides,\n  getActiveSlidesCount,\n  clickNext,\n  clickPrevious\n} from \"../test-utils\";\n\n// finds active slide number in the last transition in the forward direction\nexport function activeSlideInLastTransition(\n  noOfSlides,\n  slidesToShow,\n  slidesToScroll\n) {\n  let currentSlide = 0;\n  while (currentSlide < noOfSlides) {\n    currentSlide += slidesToScroll;\n  }\n  return currentSlide - slidesToScroll;\n}\n\n// create jsx-form children for react slider\nexport function createReactSliderChildren(noOfSlides) {\n  return Array.from(Array(noOfSlides).keys()).map(i => (\n    <div key={i}>\n      <h3>{i + 1}</h3>\n    </div>\n  ));\n}\n\n// create a react-slider with given noOfSlides and other props\n// variable widths are ignored for now for simplicity\nexport function createReactSlider({ noOfSlides, ...props }) {\n  return <Slider {...props}>{createReactSliderChildren(noOfSlides)}</Slider>;\n}\n\n// create a react inner-slider with given noOfSlides and other props\n// performs most operations like the ones when mounted inside Slider component\nexport function createInnerSlider({ noOfSlides, ...settings }) {\n  if (settings.centerMode) {\n    settings.slidesToScroll = 1; // always scroll by one when centerMode is enabled\n  }\n  settings = assign({}, defaultProps, settings);\n  const children = React.Children.toArray(\n    createReactSliderChildren(noOfSlides)\n  );\n  return <InnerSlider {...settings}>{children}</InnerSlider>;\n}\n\nexport function createInnerSliderWrapper(settings) {\n  return render(createInnerSlider(settings)).container;\n}\n\n// creates a dom string, containing children of slick children\nexport function createJQuerySliderChildren(noOfSlides) {\n  let children = [];\n  for (let i = 0; i < noOfSlides; i++) {\n    children.push(`<div><h3>${i + 1}</h3></div>`);\n  }\n  return children.join(\"\");\n}\n\n// performs the very basic tests while clicking next or prev\nexport function testSliderScroll({ direction, ...settings }) {\n  const { noOfSlides, slidesToShow, slidesToScroll, initialSlide } = settings;\n  // initialize react slider\n  const { container } = render(createReactSlider(settings));\n  // initialize jquery slider\n  document.body.innerHTML = `\n  <section class=\"regular slider\">\n    ${createJQuerySliderChildren(noOfSlides)}\n  </section>\n  `;\n  $(\".regular.slider\").slick({\n    ...settings\n  });\n  // console.log('setings:', settings)\n\n  let expectedSlideIndex = initialSlide || 0;\n  for (let click = 0; click < 2 * noOfSlides + 2; click++) {\n    let activeslides = getActiveSlides(container);\n    let $activeSlides = $(\".regular.slider\").find(\"div.slick-active\");\n    expect(getActiveSlidesCount(container)).toEqual(slidesToShow || 1);\n    expect($activeSlides.length).toEqual(slidesToShow || 1);\n    let firstActiveSlide = activeslides[0];\n    let $firstActiveSlide = $activeSlides.first();\n    // console.log('classes', $firstActiveSlide.attr('data-slick-index'))\n    // console.warn('currentSlide:', firstActiveSlide.prop('data-index'), 'expected slide', expectedSlideIndex)\n    expect(parseInt(firstActiveSlide.getAttribute(\"data-index\"))).toEqual(\n      expectedSlideIndex % noOfSlides\n    );\n    expect(parseInt($firstActiveSlide.attr(\"data-slick-index\"))).toEqual(\n      expectedSlideIndex % noOfSlides\n    );\n    if (direction === \"next\") {\n      // click the next arrow button\n      clickNext(container);\n      $(\"button.slick-next\").click();\n      expectedSlideIndex += slidesToScroll || 1;\n      if (expectedSlideIndex >= noOfSlides) {\n        expectedSlideIndex = 0;\n      }\n    } else {\n      // click on the prev arrow button\n      clickPrevious(container);\n      $(\"button.slick-prev\").click();\n      expectedSlideIndex -= slidesToScroll || 1;\n      if (expectedSlideIndex < 0) {\n        expectedSlideIndex = activeSlideInLastTransition(\n          noOfSlides,\n          slidesToShow,\n          slidesToScroll\n        );\n      }\n    }\n  }\n}\n\n// function to run tests on a slider,\n// scrolls slider to the right by clicking right arrow several times\n// scrolls slider to the left by clicking left arrow several times\nexport function testSlider(settings) {\n  const settings1 = { direction: \"next\", ...settings };\n  const settings2 = { direction: \"prev\", ...settings };\n  testSliderScroll(settings1);\n  testSliderScroll(settings2);\n}\n\nexport const tryAllConfigs = (settings, settingsList) => {\n  let leaf = true;\n  for (let key of Object.keys(settings)) {\n    if (Array.isArray(settings[key])) {\n      leaf = false;\n      for (let val of settings[key]) {\n        tryAllConfigs({ ...settings, [key]: val }, settingsList);\n      }\n    }\n  }\n  if (leaf) {\n    if (\n      settingsList\n        .map(setting => JSON.stringify(setting))\n        .indexOf(JSON.stringify(settings)) < 0\n    ) {\n      settingsList.push(settings);\n    }\n  }\n};\n\nexport const actualTrackLeft = container =>\n  container\n    .querySelector(\".slick-track\")\n    .style.transform.match(/translate3d\\((\\d+)px/i)[1];\n\nexport const testTrackLeft = container => {\n  let trackLeft = parseInt(actualTrackLeft(container));\n  let spec = assign({}, wrapper.props(), wrapper.state(), {\n    slideIndex: wrapper.state().currentSlide,\n    trackRef: null\n  });\n  let expectedTrackLeft = getTrackLeft(spec);\n  expect(trackLeft).toEqual(parseInt(expectedTrackLeft));\n};\ntest(\"fake test\", () => {\n  expect(1).toBe(1);\n});\n"
  },
  {
    "path": "__tests__/utils/filterSettings.test.js",
    "content": "import { filterSettings } from \"../../src/utils/innerSliderUtils\";\n\ndescribe(\"filterSettings\", () => {\n  it(\"returns empty object if there are no valid settings\", () => {\n    expect(filterSettings({})).toEqual({});\n    expect(filterSettings({ age: 10 })).toEqual({});\n  });\n  it(\"return an object with valid settings and omits extra properties\", () => {\n    expect(filterSettings({ arrows: true, dots: true })).toEqual({\n      arrows: true,\n      dots: true\n    });\n    expect(filterSettings({ arrows: true, dots: true, age: 10 })).toEqual({\n      arrows: true,\n      dots: true\n    });\n  });\n});\n"
  },
  {
    "path": "docs/api.md",
    "content": "### Methods\n\n| Name         | Arguments          | Description                 |\n| ------------ | ------------------ | --------------------------- |\n| `slickPrev`  | None               | go to previous slide        |\n| `slickNext`  | None               | go to next slide            |\n| `slickGoTo`  | index, dontAnimate | go to the given slide index |\n| `slickPause` | None               | pause the autoplay          |\n| `slickPlay`  | None               | start the autoplay          |\n\n#### Followings are not going to be implemented\n\n| Name                | type   | Reason                                                                                                                                                                   |\n| ------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `unslick`           | method | same functionality can be achieved with `unslick` prop                                                                                                                   |\n| `slickSetOption`    | method | same functionality can be achieved via props and managing state for them in wrapper                                                                                      |\n| `slickFilter`       | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) |\n| `slickUnfilter`     | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) |\n| `slickAdd`          | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) |\n| `slickRemove`       | method | same functionality can be achieved as with dynamic slides, look at dynamic slides [example](https://github.com/akiran/react-slick/blob/master/examples/DynamicSlides.js) |\n| `slickCurrentSlide` | method | same functionality can be achieved with `beforeChange hook`                                                                                                              |\n| `slickGetOption`    | method | manage wrapper state for desired options                                                                                                                                 |\n| `getSlick`          | method | a simple ref will do                                                                                                                                                     |\n"
  },
  {
    "path": "docs/common.md",
    "content": "#### `responsive` property\n\nArray of objects in the form of `{ breakpoint: int, settings: { ... } }` The breakpoint _int_ is the `maxWidth` so the settings will be applied when resolution is below this value. Breakpoints in the array should be ordered from smallest to greatest. Use 'unslick' in place of the settings object to disable rendering the carousel at that breakpoint. Example: `[ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } }, { breakpoint: 100000, settings: 'unslick' } ]`\n\n### Custom next/prev arrows\n\nTo customize the next/prev arrow elements, simply create new React components and set them\nas the values of nextArrow and prevArrow.\n\n```js\nclass LeftNavButton extends React.Component {\n  render() {\n    return <button {...this.props}>Next</button>;\n  }\n}\n```\n\nImportant: be sure that you pass your component's props to your clickable element\nlike the example above. If you don't, your custom component won't trigger the click handler.\n\nYou can also set `onClick={this.props.onClick}` if you only want to set the click handler.\n\n### Flexbox support\n\nIf you have flex property on container div of slider, add below css\n\n```css\n* {\n  min-height: 0;\n  min-width: 0;\n}\n```\n\n### Test Setup\n\nIf you try to run tests with jest in a project that uses react-slick, you may run into this error\n\n```\nmatchMedia not present, legacy browsers require a polyfill\n```\n\nTo fix this issue add below snippet in test-setup.js\n\n```js\nwindow.matchMedia =\n  window.matchMedia ||\n  function() {\n    return {\n      matches: false,\n      addListener: function() {},\n      removeListener: function() {}\n    };\n  };\n```\n\nand add below jest config in package.json\n\n```json\n\"jest\": {\n    \"setupFiles\": [\"test-setup.js\"]\n}\n```\n\n### Polyfills for old IE support\n\n`matchMedia` support from [media-match](https://github.com/weblinc/media-match)\n"
  },
  {
    "path": "docs/demos.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport Slider from \"../src/slider\";\n\nimport SimpleSlider from \"../examples/SimpleSlider\";\nimport SlideChangeHooks from \"../examples/SlideChangeHooks\";\nimport MultipleItems from \"../examples/MultipleItems\";\nimport MultipleRows from \"../examples/MultipleRows\";\nimport Responsive from \"../examples/Responsive\";\nimport Resizable from \"../examples/Resizable\";\nimport UnevenSetsInfinite from \"../examples/UnevenSetsInfinite\";\nimport UnevenSetsFinite from \"../examples/UnevenSetsFinite\";\nimport CenterMode from \"../examples/CenterMode\";\nimport FocusOnSelect from \"../examples/FocusOnSelect\";\nimport AutoPlay from \"../examples/AutoPlay\";\nimport AutoPlayMethods from \"../examples/AutoPlayMethods\";\nimport PauseOnHover from \"../examples/PauseOnHover\";\nimport Rtl from \"../examples/Rtl\";\nimport VariableWidth from \"../examples/VariableWidth\";\nimport AdaptiveHeight from \"../examples/AdaptiveHeight\";\nimport LazyLoad from \"../examples/LazyLoad\";\nimport Fade from \"../examples/Fade\";\nimport SlickGoTo from \"../examples/SlickGoTo\";\nimport CustomArrows from \"../examples/CustomArrows\";\nimport PreviousNextMethods from \"../examples/PreviousNextMethods\";\nimport DynamicSlides from \"../examples/DynamicSlides\";\nimport VerticalMode from \"../examples/VerticalMode\";\nimport SwipeToSlide from \"../examples/SwipeToSlide\";\nimport VerticalSwipeToSlide from \"../examples/VerticalSwipeToSlide\";\nimport CustomPaging from \"../examples/CustomPaging\";\nimport CustomSlides from \"../examples/CustomSlides\";\nimport AsNavFor from \"../examples/AsNavFor\";\nimport AppendDots from \"../examples/AppendDots\";\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      <div className=\"content\">\n        <SimpleSlider />\n        <MultipleItems />\n        <MultipleRows />\n        <Responsive />\n        <Resizable />\n        <UnevenSetsInfinite />\n        <UnevenSetsFinite />\n        <CenterMode />\n        <FocusOnSelect />\n        <AutoPlay />\n        <AutoPlayMethods />\n        <PauseOnHover />\n        <Rtl />\n        <VariableWidth />\n        <AdaptiveHeight />\n        <LazyLoad />\n        <Fade />\n        <SlideChangeHooks />\n        <SlickGoTo />\n        <CustomPaging />\n        <CustomArrows />\n        <CustomSlides />\n        <PreviousNextMethods />\n        <DynamicSlides />\n        <VerticalMode />\n        <SwipeToSlide />\n        <VerticalSwipeToSlide />\n        <AsNavFor />\n        <AppendDots />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/docs.css",
    "content": "\nh3 {\n  background: #00558B;\n  color: #fff;\n  font-size: 36px;\n  line-height: 100px;\n  margin: 10px;\n  padding: 2%;\n  position: relative;\n  text-align: center;\n}\n.variable-width .slick-slide p {\n  background: #00558B;\n  height: 100px;\n  color: #fff;\n  margin: 5px;\n  line-height: 100px;\n  text-align: center;\n}\n.center .slick-center h3 {\n  color: #e67e22;\n  opacity: 1;\n  transform: scale(1.08);\n}\n.center h3{\n  opacity: 0.8;\n  transition: all 300ms ease;\n}\n.content {\n  padding: 20px;\n  margin: auto;\n}\n@media (min-width: 701px) {\n  .content {\n    width: 80%;\n  }\n}\n@media (max-width: 700px) {\n  .content {\n    width: 70%;\n  }\n}\n.slick-slide .image {\n  padding: 10px;\n}\n.slick-slide img {\n  border: 5px solid #FFF;\n  display: block;\n  margin: auto;\n  max-width: 80%;\n}\n.slick-slide img.slick-loading {\n  border: 0\n}\n.slick-slider {\n  margin: 30px auto 50px;\n}\n.slick-dots {\n  margin-left: 0;\n}\n.slick-thumb {\n  bottom: -45px;\n}\n.slick-thumb li {\n  width: 60px;\n  height: 45px;\n}\n.slick-thumb li img {\n  width: 100%;\n  height: 100%;\n  filter: grayscale(100%);\n}\n.slick-thumb li.slick-active img{\n    filter: grayscale(0%);\n}\n@media (max-width: 768px) {\n  h3 {\n    font-size:24px;\n  }\n  .center {\n    margin-left: -40px;\n    margin-right: -40px;\n  }\n  .center .slick-center h3 {\n    color: #e67e22;\n    opacity: 1;\n    transform: scale(1);\n  }\n  .center h3 {\n    opacity: 0.8;\n    transform: scale(0.95);\n    transition: all 300ms ease;\n  }\n}\n.slick-vertical .slick-slide {\n  height: 180px;\n}\n.slick-arrow {\n  background-color: grey;\n}\n.slick-arrow:hover {\n  background-color: grey;\n}\n.slick-arrow:focus {\n  background-color: grey;\n}\n.button {\n  background-color: #00558B;\n  padding: 10px 20px;\n  margin: 0px 20px;\n  border: none;\n  color: white;\n  font-size: 20px;\n  border-radius: 5px;\n  min-height: 45px\n}\n"
  },
  {
    "path": "docs/docs.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport Demos from \"./demos\";\n\nexport default class Docs extends React.Component {\n  render() {\n    return (\n      <div className=\"\">\n        <div className=\"title-bar primary\">\n          <span className=\"title\">React Slick</span>\n        </div>\n        <div className=\"\">\n          <div className=\"\">\n            <Demos />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n    <link rel=\"stylesheet\" href=\"/slick.css\">\n    <link rel=\"stylesheet\" href=\"/slick-theme.css\">\n    <link rel=\"stylesheet\" href=\"/docs.css\">\n  </head>\n  <body>\n    <div id='rapp'></div>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js\"></script>\n    <script type=\"text/javascript\">\n      if ('addEventListener' in document) {\n        document.addEventListener('DOMContentLoaded', function() {\n            FastClick.attach(document.body);\n        }, false);\n      }\n    </script>\n    <script type=\"text/javascript\" src='/docs.js'></script>\n    <!-- For Mobile Degbugging\n    <script src=\"http://192.168.0.100:8080/target/target-script-min.js#anonymous\"></script>\n    -->\n  </body>\n</html>\n"
  },
  {
    "path": "docs/index.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Docs from \"./docs\";\n\nconst container = document.getElementById(\"rapp\");\nconst root = createRoot(container);\n\nReact.initializeTouchEvents && React.initializeTouchEvents(true);\nroot.render(\n  <React.StrictMode>\n    <Docs />\n  </React.StrictMode>\n);\n"
  },
  {
    "path": "docs/routes.js",
    "content": "\"use strict\";\n\nvar React = require(\"react\");\nvar Router = require(\"react-router\");\nvar Route = Router.Route;\nvar Docs = require(\"./docs\");\n\nvar path =\n  process.env.NODE_ENV === \"dev_docs\" ? \"/\" : \"/opensource/react-slick\";\nvar routes = <Route name=\"app\" path={path} handler={Docs}></Route>;\n\nmodule.exports = routes;\n"
  },
  {
    "path": "docs/scripts/generateExampleConfigs.js",
    "content": "const React = require(\"react\");\nconst fs = require(\"fs\");\nconst babel = require(\"babel-core\");\nconst ReactDOMServer = require(\"react-dom/server\");\n\nlet configsObject;\nif (fs.existsSync(\"./configs.json\")) {\n  configsObject = require(\"./configs.json\");\n} else {\n  configsObject = {};\n}\n\nconst fetchExampleString = exampleName => {\n  const exampleString = fs.readFileSync(`examples/${exampleName}.js`, \"utf-8\");\n  return exampleString;\n};\n\nconst extractConfig = exampleString => {\n  const pattern = /(var|const)\\s+settings\\s*=\\s*(\\{(.|\\n)+?\\n\\s*\\};)/;\n  let extraction = exampleString.match(pattern);\n  if (extraction) extraction = extraction[2];\n  else return null;\n  const propPattern = /(\\w+)\\:((?:.|\\n)+?)(?=(,\\n)|(\\n\\s*};))/g;\n  let match;\n  let matchObject = {};\n  do {\n    match = propPattern.exec(extraction);\n    if (!match) break;\n    if (!matchObject[match[1]]) {\n      matchObject[match[1]] = match[2].trim();\n    }\n  } while (match);\n  return matchObject;\n};\n\nconst extractChildren = exampleString => {\n  const pattern = /\\<Slider(?:.|\\n)*?\\>((.|\\n)*?)\\<\\/Slider\\>/;\n  return exampleString.match(pattern)[1];\n};\n\nconst transpile = exampleString =>\n  babel.transform(exampleString, {\n    plugins: [\n      \"transform-react-jsx\",\n      \"babel-plugin-transform-object-rest-spread\",\n      \"babel-plugin-transform-class-properties\",\n      \"babel-plugin-transform-es2015-arrow-functions\"\n    ]\n  }).code;\n\nconst fetchExampleConfigs = (fileName, index) => {\n  const exampleName = fileName.substring(0, fileName.length - 3);\n  const exampleString = fetchExampleString(exampleName);\n  const transformedString = transpile(exampleString);\n  let childrenString = extractChildren(exampleString.replace(/\\=\\>/g, \"$$$\")); // jsx type string\n  try {\n    // react string without jsx\n    childrenString = eval(\n      transpile(\n        `<div name=\"${exampleName}\">` + childrenString + \"</div>\"\n      ).replace(/baseUrl/g, \"'./img/react-slick'\")\n    );\n    console.log(\"success\");\n  } catch (error) {\n    childrenString = \"\";\n    console.error(\"children error:\", fileName);\n  }\n  childrenString = ReactDOMServer.renderToString(childrenString); // pure html string\n  let config = extractConfig(transformedString);\n  if (config) {\n    configsObject[exampleName] = {\n      props: config,\n      children: childrenString\n    };\n  } else {\n    console.log(\"config error:\", fileName);\n  }\n};\n\nconst exampleFiles = fs\n  .readdirSync(\"examples\")\n  .filter(file => file.endsWith(\".js\") && file[0] === file[0].toUpperCase())\n  .forEach((fileName, index) => fetchExampleConfigs(fileName, index));\nfs.writeFileSync(\n  \"examples/scripts/configs.json\",\n  JSON.stringify(configsObject, null, 4)\n);\n"
  },
  {
    "path": "docs/scripts/generateExamples.js",
    "content": "const fs = require(\"fs\");\nconst exampleConfigs = require(\"./configs.json\");\nconst exec = require(\"child_process\").exec;\n\nvar procCode = exec(\n  \"cp -r node_modules/slick-carousel/slick/fonts node_modules/slick-carousel/slick/ajax-loader.gif docs/\"\n);\n\nconst toString = obj => {\n  let ret = \"{\\n\";\n  Object.keys(obj).forEach(key => {\n    if (\n      obj[key].match(\"function\") ||\n      obj[key].match(\"React.createElement\" || obj[key].match(\"\\n\"))\n    ) {\n      return;\n    }\n    if (\n      key.match(\"style\") ||\n      key.match(\"src\") ||\n      key.match(\"border\") ||\n      key.match(\"settings\") ||\n      key.match(\"responsive\")\n    )\n      return;\n    ret += \"\\t\" + key + \": \" + obj[key] + \",\\n\";\n  });\n  ret += \"}\\n\";\n  return ret;\n};\n\nlet bodyHTML = \"\";\nlet bodyScript = \"\";\nObject.keys(exampleConfigs).forEach(key => {\n  const props = exampleConfigs[key][\"props\"];\n  const children = exampleConfigs[key][\"children\"];\n  if (!props || !children) return;\n  bodyHTML += `\n    <div>\n      <h2>${key}</h2>\n      ${children}\n    </div>\n  `;\n  bodyScript += `\n$('[name=\"${key}\"').slick(${toString(props)})\n  `;\n});\n\nlet HTMLString = `<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <link rel=\"stylesheet\" href=\"./slick.css\">\n    <link rel=\"stylesheet\" href=\"./slick-theme.css\">\n    <link rel=\"stylesheet\" href=\"./docs.css\">\n    <script type=\"text/javascript\" src=\"https://code.jquery.com/jquery-2.2.0.min.js\"></script>\n    <script type=\"text/javascript\" src=\"../node_modules/slick-carousel/slick/slick.min.js\"></script>\n    <!--\n    <style>\n      .slick-dots li button:before {\n        content: \"•\";\n      }\n      .slick-prev:before {\n        content: \"←\";\n      }\n      .slick-next:before {\n        content: \"→\";\n      }\n      -->\n    </style>\n  </head>\n  <body>\n    <div class=\"content\">\n      ${bodyHTML}\n    </div>\n    <script type='text/javascript'>\n      $(document).on('ready', function() {\n        ${bodyScript}\n      })\n    </script>\n  </body>\n</html>\n`;\n\nfs.writeFileSync(\"docs/jquery.html\", HTMLString);\n"
  },
  {
    "path": "docs/single-demo.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport Slider from \"../src/slider\";\nimport MultipleItems from \"../examples/MultipleItems\";\nimport SimpleSlider from \"../examples/SimpleSlider\";\nimport CenterMode from \"../examples/CenterMode\";\nimport UnevenSetsInfinite from \"../examples/UnevenSetsInfinite\";\n// function SimpleSlider() {\n//   const settings = {\n//     dots: true,\n//     infinite: true,\n//     speed: 500,\n//     slidesToShow: 1,\n//     slidesToScroll: 1\n//   };\n//   return (\n//     <div>\n//       <h2> Single Item</h2>\n//       <Slider {...settings}>\n//         <div>\n//           <h3>1</h3>\n//         </div>\n//         <div>\n//           <h3>2</h3>\n//         </div>\n//         <div>\n//           <h3>3</h3>\n//         </div>\n//         <div>\n//           <h3>4</h3>\n//         </div>\n//         <div>\n//           <h3>5</h3>\n//         </div>\n//         <div>\n//           <h3>6</h3>\n//         </div>\n//       </Slider>\n//     </div>\n//   );\n// }\n\nfunction App() {\n  return (\n    <div className=\"content\">\n      {/* <SimpleSlider /> */}\n      {/* <MultipleItems /> */}\n      {/* <CenterMode /> */}\n      <UnevenSetsInfinite />\n    </div>\n  );\n}\n\nconst container = document.getElementById(\"rapp\");\nconst root = createRoot(container);\n\nReact.initializeTouchEvents && React.initializeTouchEvents(true);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n"
  },
  {
    "path": "docs/slick-theme.css",
    "content": "@charset 'UTF-8';\n/* Slider */\n.slick-loading .slick-list\n{\n    background: #fff url('./ajax-loader.gif') center center no-repeat;\n}\n\n/* Icons */\n@font-face\n{\n    font-family: 'slick';\n    font-weight: normal;\n    font-style: normal;\n\n    src: url('./fonts/slick.eot');\n    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');\n}\n/* Arrows */\n.slick-prev,\n.slick-next\n{\n    font-size: 0;\n    line-height: 0;\n\n    position: absolute;\n    top: 50%;\n\n    display: block;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    -webkit-transform: translate(0, -50%);\n    -ms-transform: translate(0, -50%);\n    transform: translate(0, -50%);\n\n    cursor: pointer;\n\n    color: transparent;\n    border: none;\n    outline: none;\n    background: transparent;\n}\n.slick-prev:hover,\n.slick-prev:focus,\n.slick-next:hover,\n.slick-next:focus\n{\n    color: transparent;\n    outline: none;\n    background: transparent;\n}\n.slick-prev:hover:before,\n.slick-prev:focus:before,\n.slick-next:hover:before,\n.slick-next:focus:before\n{\n    opacity: 1;\n}\n.slick-prev.slick-disabled:before,\n.slick-next.slick-disabled:before\n{\n    opacity: .25;\n}\n\n.slick-prev:before,\n.slick-next:before\n{\n    font-family: 'slick';\n    font-size: 20px;\n    line-height: 1;\n\n    opacity: .75;\n    color: white;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\n.slick-prev\n{\n    left: -25px;\n}\n[dir='rtl'] .slick-prev\n{\n    right: -25px;\n    left: auto;\n}\n.slick-prev:before\n{\n    content: '←';\n}\n[dir='rtl'] .slick-prev:before\n{\n    content: '→';\n}\n\n.slick-next\n{\n    right: -25px;\n}\n[dir='rtl'] .slick-next\n{\n    right: auto;\n    left: -25px;\n}\n.slick-next:before\n{\n    content: '→';\n}\n[dir='rtl'] .slick-next:before\n{\n    content: '←';\n}\n\n/* Dots */\n.slick-dotted.slick-slider\n{\n    margin-bottom: 30px;\n}\n\n.slick-dots\n{\n    position: absolute;\n    bottom: -25px;\n\n    display: block;\n\n    width: 100%;\n    padding: 0;\n    margin: 0;\n\n    list-style: none;\n\n    text-align: center;\n}\n.slick-dots li\n{\n    position: relative;\n\n    display: inline-block;\n\n    width: 20px;\n    height: 20px;\n    margin: 0 5px;\n    padding: 0;\n\n    cursor: pointer;\n}\n.slick-dots li button\n{\n    font-size: 0;\n    line-height: 0;\n\n    display: block;\n\n    width: 20px;\n    height: 20px;\n    padding: 5px;\n\n    cursor: pointer;\n\n    color: transparent;\n    border: 0;\n    outline: none;\n    background: transparent;\n}\n.slick-dots li button:hover,\n.slick-dots li button:focus\n{\n    outline: none;\n}\n.slick-dots li button:hover:before,\n.slick-dots li button:focus:before\n{\n    opacity: 1;\n}\n.slick-dots li button:before\n{\n    font-family: 'slick';\n    font-size: 6px;\n    line-height: 20px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 20px;\n    height: 20px;\n\n    content: '•';\n    text-align: center;\n\n    opacity: .25;\n    color: black;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n.slick-dots li.slick-active button:before\n{\n    opacity: .75;\n    color: black;\n}\n"
  },
  {
    "path": "docs/slick.css",
    "content": "/* Slider */\n.slick-slider\n{\n    position: relative;\n\n    display: block;\n    box-sizing: border-box;\n\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n\n    -webkit-touch-callout: none;\n    -khtml-user-select: none;\n    -ms-touch-action: pan-y;\n        touch-action: pan-y;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.slick-list\n{\n    position: relative;\n\n    display: block;\n    overflow: hidden;\n\n    margin: 0;\n    padding: 0;\n}\n.slick-list:focus\n{\n    outline: none;\n}\n.slick-list.dragging\n{\n    cursor: pointer;\n    cursor: hand;\n}\n\n.slick-slider .slick-track,\n.slick-slider .slick-list\n{\n    -webkit-transform: translate3d(0, 0, 0);\n       -moz-transform: translate3d(0, 0, 0);\n        -ms-transform: translate3d(0, 0, 0);\n         -o-transform: translate3d(0, 0, 0);\n            transform: translate3d(0, 0, 0);\n}\n\n.slick-track\n{\n    position: relative;\n    top: 0;\n    left: 0;\n\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n}\n.slick-track:before,\n.slick-track:after\n{\n    display: table;\n\n    content: '';\n}\n.slick-track:after\n{\n    clear: both;\n}\n.slick-loading .slick-track\n{\n    visibility: hidden;\n}\n\n.slick-slide\n{\n    display: none;\n    float: left;\n\n    height: 100%;\n    min-height: 1px;\n}\n[dir='rtl'] .slick-slide\n{\n    float: right;\n}\n.slick-slide img\n{\n    display: block;\n}\n.slick-slide.slick-loading img\n{\n    display: none;\n}\n.slick-slide.dragging img\n{\n    pointer-events: none;\n}\n.slick-initialized .slick-slide\n{\n    display: block;\n}\n.slick-loading .slick-slide\n{\n    visibility: hidden;\n}\n.slick-vertical .slick-slide\n{\n    display: block;\n\n    height: auto;\n\n    border: 1px solid transparent;\n}\n.slick-arrow.slick-hidden {\n    display: none;\n}\n"
  },
  {
    "path": "examples/AdaptiveHeight.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AdaptiveHeight() {\n  const settings = {\n    className: \"\",\n    dots: true,\n    infinite: true,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    adaptiveHeight: true\n  };\n\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n          <p>Hello</p>\n        </div>\n        <div>\n          <h3>3</h3>\n          <p>See ....</p>\n          <p>Height is adaptive</p>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default AdaptiveHeight;\n"
  },
  {
    "path": "examples/AppendDots.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AppendDots() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    appendDots: dots => (\n      <div\n        style={{\n          backgroundColor: \"#ddd\",\n          borderRadius: \"10px\",\n          padding: \"10px\"\n        }}\n      >\n        <ul style={{ margin: \"0px\" }}> {dots} </ul>\n      </div>\n    ),\n    customPaging: i => (\n      <div\n        style={{\n          width: \"30px\",\n          color: \"blue\",\n          border: \"1px blue solid\"\n        }}\n      >\n        {i + 1}\n      </div>\n    )\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\nexport default AppendDots;\n"
  },
  {
    "path": "examples/AsNavFor.js",
    "content": "import React, { useState, useEffect, useRef } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AsNavFor() {\n  const [nav1, setNav1] = useState(null);\n  const [nav2, setNav2] = useState(null);\n  let sliderRef1 = useRef(null);\n  let sliderRef2 = useRef(null);\n\n  useEffect(() => {\n    setNav1(sliderRef1);\n    setNav2(sliderRef2);\n  }, []);\n  return (\n    <div className=\"slider-container\">\n      <h2>Slider Syncing (AsNavFor)</h2>\n      <h4>First Slider</h4>\n      <Slider asNavFor={nav2} ref={slider => (sliderRef1 = slider)}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n      <h4>Second Slider</h4>\n      <Slider\n        asNavFor={nav1}\n        ref={slider => (sliderRef2 = slider)}\n        slidesToShow={3}\n        swipeToSlide={true}\n        focusOnSelect={true}\n      >\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default AsNavFor;\n"
  },
  {
    "path": "examples/AutoPlay.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AutoPlay() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    autoplay: true,\n    speed: 2000,\n    autoplaySpeed: 2000,\n    cssEase: \"linear\"\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default AutoPlay;\n"
  },
  {
    "path": "examples/AutoPlayMethods.js",
    "content": "import React, { useRef } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction AutoPlayMethods() {\n  let sliderRef = useRef(null);\n  const play = () => {\n    sliderRef.slickPlay();\n  };\n  const pause = () => {\n    sliderRef.slickPause();\n  };\n\n  const settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    autoplay: true,\n    autoplaySpeed: 2000\n  };\n  return (\n    <div className=\"slider-container\">\n      <h2>Auto Play {\"&\"} Pause with buttons</h2>\n      <Slider ref={slider => (sliderRef = slider)} {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n      <div style={{ textAlign: \"center\" }}>\n        <button className=\"button\" onClick={play}>\n          Play\n        </button>\n        <button className=\"button\" onClick={pause}>\n          Pause\n        </button>\n      </div>\n    </div>\n  );\n}\nexport default AutoPlayMethods;\n"
  },
  {
    "path": "examples/CenterMode.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction CenterMode() {\n  const settings = {\n    className: \"center\",\n    centerMode: true,\n    infinite: true,\n    centerPadding: \"60px\",\n    slidesToShow: 3,\n    speed: 500\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default CenterMode;\n"
  },
  {
    "path": "examples/CustomArrows.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SampleNextArrow(props) {\n  const { className, style, onClick } = props;\n  return (\n    <div\n      className={className}\n      style={{ ...style, display: \"block\", background: \"red\" }}\n      onClick={onClick}\n    />\n  );\n}\n\nfunction SamplePrevArrow(props) {\n  const { className, style, onClick } = props;\n  return (\n    <div\n      className={className}\n      style={{ ...style, display: \"block\", background: \"green\" }}\n      onClick={onClick}\n    />\n  );\n}\n\nfunction CustomArrows() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    nextArrow: <SampleNextArrow />,\n    prevArrow: <SamplePrevArrow />\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default CustomArrows;\n"
  },
  {
    "path": "examples/CustomPaging.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunction CustomPaging() {\n  const settings = {\n    customPaging: function(i) {\n      return (\n        <a>\n          <img src={`${baseUrl}/abstract0${i + 1}.jpg`} />\n        </a>\n      );\n    },\n    dots: true,\n    dotsClass: \"slick-dots slick-thumb\",\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <img src={baseUrl + \"/abstract01.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract02.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract03.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract04.jpg\"} />\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default CustomPaging;\n"
  },
  {
    "path": "examples/CustomSlides.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction CustomSlide(props) {\n  const { index, ...otherProps } = props;\n  return (\n    <div {...otherProps}>\n      <h3>{index}</h3>\n    </div>\n  );\n}\n\nfunction CustomSlides() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <CustomSlide index={1} />\n        <CustomSlide index={2} />\n        <CustomSlide index={3} />\n        <CustomSlide index={4} />\n        <CustomSlide index={5} />\n        <CustomSlide index={6} />\n      </Slider>\n    </div>\n  );\n}\n\nexport default CustomSlides;\n"
  },
  {
    "path": "examples/DynamicSlides.js",
    "content": "import React, { useState } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction DynamicSlides() {\n  const [slides, setSlides] = useState([1, 2, 3, 4, 5, 6]);\n  const handleClick = () => {\n    setSlides(\n      slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]\n    );\n  };\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 3,\n    slidesToScroll: 3\n  };\n  return (\n    <div className=\"slider-container\">\n      <button className=\"button\" onClick={handleClick}>\n        Click to change slide count\n      </button>\n      <Slider {...settings}>\n        {slides.map(slide => {\n          return (\n            <div key={slide}>\n              <h3>{slide}</h3>\n            </div>\n          );\n        })}\n      </Slider>\n    </div>\n  );\n}\n\nexport default DynamicSlides;\n"
  },
  {
    "path": "examples/Fade.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunction Fade() {\n  const settings = {\n    dots: true,\n    fade: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    waitForAnimate: false\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <img src={baseUrl + \"/abstract01.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract02.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract03.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract04.jpg\"} />\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default Fade;\n"
  },
  {
    "path": "examples/FocusOnSelect.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction FocusOnSelect() {\n  const settings = {\n    focusOnSelect: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    speed: 500\n  };\n  return (\n    <div className=\"slider-container\">\n      <div>Click on any slide to select and make it current slide</div>\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default FocusOnSelect;\n"
  },
  {
    "path": "examples/LazyLoad.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunction LazyLoad() {\n  const settings = {\n    dots: true,\n    lazyLoad: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    initialSlide: 2\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <img src={baseUrl + \"/abstract01.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract02.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract03.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract04.jpg\"} />\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default LazyLoad;\n"
  },
  {
    "path": "examples/MultipleItems.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction MultipleItems() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 3,\n    slidesToScroll: 3\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n        <div>\n          <h3>7</h3>\n        </div>\n        <div>\n          <h3>8</h3>\n        </div>\n        <div>\n          <h3>9</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default MultipleItems;\n"
  },
  {
    "path": "examples/MultipleRows.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction MultipleRows() {\n  const settings = {\n    className: \"center\",\n    centerMode: true,\n    infinite: true,\n    centerPadding: \"60px\",\n    slidesToShow: 3,\n    speed: 500,\n    rows: 2,\n    slidesPerRow: 2\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n        <div>\n          <h3>7</h3>\n        </div>\n        <div>\n          <h3>8</h3>\n        </div>\n        <div>\n          <h3>9</h3>\n        </div>\n        <div>\n          <h3>10</h3>\n        </div>\n        <div>\n          <h3>11</h3>\n        </div>\n        <div>\n          <h3>12</h3>\n        </div>\n        <div>\n          <h3>13</h3>\n        </div>\n        <div>\n          <h3>14</h3>\n        </div>\n        <div>\n          <h3>15</h3>\n        </div>\n        <div>\n          <h3>16</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default MultipleRows;\n"
  },
  {
    "path": "examples/PauseOnHover.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction PauseOnHover() {\n  var settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    autoplay: true,\n    autoplaySpeed: 2000,\n    pauseOnHover: true\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default PauseOnHover;\n"
  },
  {
    "path": "examples/PreviousNextMethods.js",
    "content": "import React, { useRef } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction PreviousNextMethods() {\n  let sliderRef = useRef(null);\n  const next = () => {\n    sliderRef.slickNext();\n  };\n  const previous = () => {\n    sliderRef.slickPrev();\n  };\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider\n        ref={slider => {\n          sliderRef = slider;\n        }}\n        {...settings}\n      >\n        <div key={1}>\n          <h3>1</h3>\n        </div>\n        <div key={2}>\n          <h3>2</h3>\n        </div>\n        <div key={3}>\n          <h3>3</h3>\n        </div>\n        <div key={4}>\n          <h3>4</h3>\n        </div>\n        <div key={5}>\n          <h3>5</h3>\n        </div>\n        <div key={6}>\n          <h3>6</h3>\n        </div>\n      </Slider>\n      <div style={{ textAlign: \"center\" }}>\n        <button className=\"button\" onClick={previous}>\n          Previous\n        </button>\n        <button className=\"button\" onClick={next}>\n          Next\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport default PreviousNextMethods;\n"
  },
  {
    "path": "examples/Resizable.js",
    "content": "import React, { useState } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction Resizable() {\n  const [display, setDisplay] = useState(true);\n  const [width, setWidth] = useState(600);\n\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 3,\n    slidesToScroll: 1\n  };\n  return (\n    <div className=\"slider-container\">\n      <h2> Resizable Collapsible </h2>\n      <button className=\"button\" onClick={() => setWidth(width + 100)}>\n        {\" \"}\n        increase{\" \"}\n      </button>\n      <button className=\"button\" onClick={() => setWidth(width - 100)}>\n        {\" \"}\n        decrease{\" \"}\n      </button>\n      <button className=\"button\" onClick={() => setDisplay(!display)}>\n        {\" \"}\n        toggle{\" \"}\n      </button>\n      <div\n        style={{\n          width: width + \"px\",\n          display: display ? \"block\" : \"none\"\n        }}\n      >\n        <Slider {...settings}>\n          <div>\n            <h3>1</h3>\n          </div>\n          <div>\n            <h3>2</h3>\n          </div>\n          <div>\n            <h3>3</h3>\n          </div>\n          <div>\n            <h3>4</h3>\n          </div>\n          <div>\n            <h3>5</h3>\n          </div>\n          <div>\n            <h3>6</h3>\n          </div>\n        </Slider>\n      </div>\n    </div>\n  );\n}\n\nexport default Resizable;\n"
  },
  {
    "path": "examples/Responsive.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction Responsive() {\n  var settings = {\n    dots: true,\n    infinite: false,\n    speed: 500,\n    slidesToShow: 4,\n    slidesToScroll: 4,\n    initialSlide: 0,\n    responsive: [\n      {\n        breakpoint: 1024,\n        settings: {\n          slidesToShow: 3,\n          slidesToScroll: 3,\n          infinite: true,\n          dots: true\n        }\n      },\n      {\n        breakpoint: 600,\n        settings: {\n          slidesToShow: 2,\n          slidesToScroll: 2,\n          initialSlide: 2\n        }\n      },\n      {\n        breakpoint: 480,\n        settings: {\n          slidesToShow: 1,\n          slidesToScroll: 1\n        }\n      }\n    ]\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n        <div>\n          <h3>7</h3>\n        </div>\n        <div>\n          <h3>8</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default Responsive;\n"
  },
  {
    "path": "examples/Rtl.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction Rtl() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    autoplay: true,\n    autoplaySpeed: 2000,\n    rtl: true\n  };\n  return (\n    <div className=\"slider-container\">\n      <h2>Right to Left</h2>\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default Rtl;\n"
  },
  {
    "path": "examples/SimpleSlider.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SimpleSlider() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default SimpleSlider;\n"
  },
  {
    "path": "examples/SlickGoTo.js",
    "content": "import React, { useState, useRef } from \"react\";\nimport Slider from \"react-slick\";\nimport { baseUrl } from \"./config\";\n\nfunction SlickGoTo() {\n  const [slideIndex, setSlideIndex] = useState(0);\n  const [updateCount, setUpdateCount] = useState(0);\n  let sliderRef = useRef(null);\n  const settings = {\n    dots: false,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    afterChange: () => setUpdateCount(updateCount + 1),\n    beforeChange: (current, next) => setSlideIndex(next)\n  };\n  return (\n    <div className=\"slider-container\">\n      <p>Total updates: {updateCount} </p>\n      <input\n        onChange={e => sliderRef.slickGoTo(e.target.value)}\n        value={slideIndex}\n        type=\"range\"\n        min={0}\n        max={3}\n      />\n      <Slider\n        ref={slider => {\n          sliderRef = slider;\n        }}\n        {...settings}\n      >\n        <div>\n          <img src={baseUrl + \"/abstract01.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract02.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract03.jpg\"} />\n        </div>\n        <div>\n          <img src={baseUrl + \"/abstract04.jpg\"} />\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default SlickGoTo;\n"
  },
  {
    "path": "examples/SlideChangeHooks.js",
    "content": "import React, { useState } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SlideChangeHooks() {\n  const [oldSlide, setOldSlide] = useState(0);\n  const [activeSlide, setActiveSlide] = useState(0);\n  const [activeSlide2, setActiveSlide2] = useState(0);\n\n  const settings = {\n    dots: true,\n    infinite: true,\n    speed: 1000,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    beforeChange: (current, next) => {\n      setOldSlide(current);\n      setActiveSlide(next);\n    },\n    afterChange: current => setActiveSlide2(current)\n  };\n  return (\n    <div className=\"slider-container\">\n      <h2>beforeChange and afterChange hooks</h2>\n      <p>\n        BeforeChange {\"=>\"} oldSlide: <strong>{oldSlide}</strong>\n      </p>\n      <p>\n        BeforeChange {\"=>\"} activeSlide: <strong>{activeSlide}</strong>\n      </p>\n      <p>\n        AfterChange {\"=>\"} activeSlide: <strong>{activeSlide2}</strong>\n      </p>\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default SlideChangeHooks;\n"
  },
  {
    "path": "examples/SwipeToSlide.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction SwipeToSlide() {\n  const settings = {\n    className: \"center\",\n    infinite: true,\n    centerPadding: \"60px\",\n    slidesToShow: 5,\n    swipeToSlide: true,\n    afterChange: function(index) {\n      console.log(\n        `Slider Changed to: ${index + 1}, background: #222; color: #bada55`\n      );\n    }\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n        <div>\n          <h3>7</h3>\n        </div>\n        <div>\n          <h3>8</h3>\n        </div>\n        <div>\n          <h3>9</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default SwipeToSlide;\n"
  },
  {
    "path": "examples/UnevenSetsFinite.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction UnevenSetsFinite() {\n  var settings = {\n    dots: true,\n    infinite: false,\n    speed: 500,\n    slidesToScroll: 4,\n    slidesToShow: 4\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default UnevenSetsFinite;\n"
  },
  {
    "path": "examples/UnevenSetsInfinite.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction UnevenSetsInfinite() {\n  var settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToScroll: 4,\n    slidesToShow: 4\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default UnevenSetsInfinite;\n"
  },
  {
    "path": "examples/VariableWidth.js",
    "content": "import React from \"react\";\nimport Slider from \"react-slick\";\n\nfunction VariableWidth() {\n  const settings = {\n    className: \"slider variable-width\",\n    dots: true,\n    infinite: true,\n    centerMode: true,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    variableWidth: true\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div style={{ width: 100 }}>\n          <p>100</p>\n        </div>\n        <div style={{ width: 200 }}>\n          <p>200</p>\n        </div>\n        <div style={{ width: 75 }}>\n          <p>75</p>\n        </div>\n        <div style={{ width: 300 }}>\n          <p>300</p>\n        </div>\n        <div style={{ width: 225 }}>\n          <p>225</p>\n        </div>\n        <div style={{ width: 175 }}>\n          <p>175</p>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default VariableWidth;\n"
  },
  {
    "path": "examples/VerticalMode.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction VerticalMode() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    vertical: true,\n    verticalSwiping: true,\n    beforeChange: function(currentSlide, nextSlide) {\n      console.log(\"before change\", currentSlide, nextSlide);\n    },\n    afterChange: function(currentSlide) {\n      console.log(\"after change\", currentSlide);\n    }\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default VerticalMode;\n"
  },
  {
    "path": "examples/VerticalSwipeToSlide.js",
    "content": "import React, { Component } from \"react\";\nimport Slider from \"react-slick\";\n\nfunction VerticalSwipeToSlide() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    vertical: true,\n    verticalSwiping: true,\n    swipeToSlide: true,\n    beforeChange: function(currentSlide, nextSlide) {\n      console.log(\"before change\", currentSlide, nextSlide);\n    },\n    afterChange: function(currentSlide) {\n      console.log(\"after change\", currentSlide);\n    }\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default VerticalSwipeToSlide;\n"
  },
  {
    "path": "examples/__tests__/CentreMode.test.js",
    "content": "import React from \"react\";\nimport CenterMode from \"../CenterMode\";\nimport { render } from \"@testing-library/react\";\nimport { html as beautify_html } from \"js-beautify\";\nimport {\n  getActiveSlides,\n  getActiveSlidesCount,\n  getClonesCount,\n  getCurrentSlide,\n  getSlidesCount,\n  clickNext\n} from \"../../test-utils\";\n\ndescribe(\"CenterMode Tests\", () => {\n  test(\"Counting test\", () => {\n    const { container } = render(<CenterMode />);\n    let totalSlides = getSlidesCount(container);\n    let clonedSlides = getClonesCount(container);\n    let activeSlides = getActiveSlidesCount(container);\n    expect(totalSlides).toEqual(14);\n    expect(clonedSlides).toEqual(8);\n    expect(activeSlides).toEqual(3);\n    //expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  test(\"Positioning test\", () => {\n    const { container } = render(<CenterMode />);\n    let currentSlide = getCurrentSlide(container);\n    let activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(0);\n    expect(\n      Array.from(activeslides).map(e => parseInt(e.getAttribute(\"data-index\")))\n    ).toEqual([-1, 0, 1]);\n    //expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  test(\"Activity test\", () => {\n    const { container } = render(<CenterMode />);\n    let currentSlide = getCurrentSlide(container);\n    let activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(0);\n    expect(\n      Array.from(activeslides).map(e => parseInt(e.getAttribute(\"data-index\")))\n    ).toEqual([-1, 0, 1]);\n    clickNext(container);\n\n    currentSlide = getCurrentSlide(container);\n    activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(1);\n    expect(\n      Array.from(activeslides).map(e => parseInt(e.getAttribute(\"data-index\")))\n    ).toEqual([0, 1, 2]);\n\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "examples/__tests__/Fade.js",
    "content": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Fade from \"../Fade\";\nimport { getActiveSlide, clickNext, clickPrevious } from \"../../test-utils\";\n\ndescribe(\"Fade\", () => {\n  it(\"should change slides when clicked on next & prev buttons\", () => {\n    const { container } = render(<Fade />);\n    let activeslide = getActiveSlide(container);\n    expect(parseInt(activeslide.getAttribute(\"data-index\"))).toEqual(0);\n    clickNext(container);\n    activeslide = getActiveSlide(container);\n    expect(parseInt(activeslide.getAttribute(\"data-index\"))).toEqual(1);\n    clickPrevious(container);\n    activeslide = getActiveSlide(container);\n    expect(parseInt(activeslide.getAttribute(\"data-index\"))).toEqual(0);\n  });\n});\n"
  },
  {
    "path": "examples/__tests__/FocusOnSelect.test.js",
    "content": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport { html as beautify_html } from \"js-beautify\";\nimport {\n  activeSlide,\n  clickNext,\n  clickPrevious,\n  getButtons,\n  getCurrentSlide\n} from \"../../test-utils\";\nimport FocusOnSelect from \"../FocusOnSelect\";\n\ndescribe(\"FocusOnSelect Tests\", () => {\n  test(\"Activity Test\", () => {\n    const { container } = render(<FocusOnSelect />);\n    expect(\n      parseInt(getCurrentSlide(container).getAttribute(\"data-index\"))\n    ).toEqual(0);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n    Array.from(container.getElementsByClassName(\"slick-slide\")).map(e =>\n      e.getAttribute(\"data-index\") == \"2\"\n        ? fireEvent(\n            e,\n            new MouseEvent(\"click\", { bubbles: true, cancelable: true })\n          )\n        : null\n    );\n    expect(\n      parseInt(getCurrentSlide(container).getAttribute(\"data-index\"))\n    ).toEqual(2);\n    //expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "examples/__tests__/MultipleItems.test.js",
    "content": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport { html as beautify_html } from \"js-beautify\";\nimport {\n  activeSlide,\n  activeSlides,\n  clickNext,\n  clickPrevious,\n  getActiveButton,\n  getActiveSlidesCount,\n  getActiveSlidesText,\n  getButtons,\n  getButtonsLength,\n  getButtonsListItem,\n  getClonesCount,\n  getCurrentSlide,\n  getSlidesCount,\n  hasClass\n} from \"../../test-utils\";\nimport MultipleItems from \"../MultipleItems\";\n\ndescribe(\"Multiple Items\", function() {\n  it(\"should have 9 actual slides and (3(pre) + 3(post)) clone slides\", function() {\n    const { container } = render(<MultipleItems />);\n    expect(getSlidesCount(container)).toEqual(15);\n    expect(getClonesCount(container)).toEqual(6);\n    //expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should have 3 active slides\", function() {\n    const { container } = render(<MultipleItems />);\n    expect(getActiveSlidesCount(container)).toEqual(3);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should have 3 dots\", function() {\n    const { container } = render(<MultipleItems />);\n    expect(getButtonsLength(container)).toEqual(3);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should show first 3 slides\", function() {\n    const { container } = render(<MultipleItems />);\n    expect(getActiveButton(container)).toEqual([\"1\"]);\n    expect(getActiveSlidesText(container)).toEqual([\"1\", \"2\", \"3\"]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should show slides from 4 to 6 when next button is clicked\", function() {\n    const { container } = render(<MultipleItems />);\n    clickNext(container);\n    // Array.from(container.querySelectorAll(\".slick-current\")).map(e=>console.log(e.textContent))\n    expect(getActiveButton(container)).toEqual([\"2\"]);\n    expect(getActiveSlidesText(container)).toEqual([\"4\", \"5\", \"6\"]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should show last 3 slides when previous button is clicked\", function() {\n    const { container } = render(<MultipleItems />);\n    clickPrevious(container);\n    expect(getActiveButton(container)).toEqual([\"3\"]);\n    expect(getActiveSlidesText(container)).toEqual([\"7\", \"8\", \"9\"]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should show slides first 3 slides when first dot is clicked\", function() {\n    const { container } = render(<MultipleItems />);\n    fireEvent(\n      getButtons(container)[0],\n      new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true\n      })\n    );\n    expect(getActiveButton(container)).toEqual([\"1\"]);\n    expect(getActiveSlidesText(container)).toEqual([\"1\", \"2\", \"3\"]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should show slides from 4 to 6 when middle dot is clicked\", function() {\n    const { container } = render(<MultipleItems />);\n    fireEvent(\n      getButtons(container)[1],\n      new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true\n      })\n    );\n    expect(getActiveButton(container)).toEqual([\"2\"]);\n    expect(getActiveSlidesText(container)).toEqual([\"4\", \"5\", \"6\"]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"should show last 3 slides when last dot is clicked\", function() {\n    const { container } = render(<MultipleItems />);\n    fireEvent(\n      getButtons(container)[2],\n      new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true\n      })\n    );\n    expect(getActiveButton(container)).toEqual([\"3\"]);\n    expect(getActiveSlidesText(container)).toEqual([\"7\", \"8\", \"9\"]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "examples/__tests__/SimpleSlider.test.js",
    "content": "import React from \"react\";\nimport SimpleSlider from \"../SimpleSlider\";\nimport { render, fireEvent, waitFor, screen } from \"@testing-library/react\";\nimport { html as beautify_html } from \"js-beautify\";\nimport {\n  getActiveSlide,\n  clickNext,\n  clickPrevious,\n  hasClass,\n  getActiveSlides,\n  getActiveSlidesCount,\n  getActiveSlidesText,\n  getButtons,\n  getButtonsListItem,\n  getCurrentSlide\n} from \"../../test-utils\";\n\ndescribe(\"SimpleSlider example\", () => {\n  it(\"should have 13 slides (1(preclone) + 6(actual) + 1(postclone))\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(container.getElementsByClassName(\"slick-slide\").length).toBe(8);\n  });\n  it(\"should have 7 clone slides\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(container.getElementsByClassName(\"slick-cloned\").length).toBe(2);\n  });\n  it(\"should have 1 current slide\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(\n      container.querySelectorAll(\".slick-slide.slick-current\").length\n    ).toBe(1);\n    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);\n  });\n  it(\"should have 1 active slide\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(container.querySelectorAll(\".slick-slide.slick-active\").length).toBe(\n      1\n    );\n    expect(\n      Array.from(getActiveSlide(container).children).map(\n        e => parseInt(e.textContent) - 1\n      )[0]\n    ).toBe(0);\n  });\n  it(\"should have 6 dots\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(\n      container.getElementsByClassName(\"slick-dots\")[0].children.length\n    ).toBe(6);\n  });\n  it(\"should have 1 active dot\", function() {\n    const { container } = render(<SimpleSlider />);\n\n    expect(container.querySelectorAll(\".slick-dots .slick-active\").length).toBe(\n      1\n    );\n  });\n  it(\"should have a prev arrow\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(container.getElementsByClassName(\"slick-prev\").length).toBe(1);\n  });\n  it(\"should have a next arrow\", function() {\n    const { container } = render(<SimpleSlider />);\n    expect(container.getElementsByClassName(\"slick-next\").length).toBe(1);\n  });\n  it(\"should got to next slide when next button is clicked\", function() {\n    const { container } = render(<SimpleSlider />);\n    clickNext(container);\n    expect(\n      container.querySelectorAll(\".slick-slide.slick-active\")[0].textContent\n    ).toBe(\"2\");\n    expect(container.querySelectorAll(\".slick-dots .slick-active\").length).toBe(\n      1\n    );\n    expect(\n      container.querySelectorAll(\".slick-dots\")[0].children[1]\n    ).toHaveClass(\"slick-active\");\n  });\n  it(\"should goto previous slide when prev button is clicked\", function() {\n    const { container } = render(<SimpleSlider />);\n    clickPrevious(container);\n    expect(\n      container.querySelectorAll(\".slick-slide.slick-active\")[0].textContent\n    ).toBe(\"6\");\n    expect(container.querySelectorAll(\".slick-dots .slick-active\").length).toBe(\n      1\n    );\n    expect(\n      container.querySelectorAll(\".slick-dots\")[0].children[5]\n    ).toHaveClass(\"slick-active\");\n  });\n  it(\"should goto 4th slide when 4th dot is clicked\", function() {\n    const { container } = render(<SimpleSlider />);\n    fireEvent(\n      container.querySelectorAll(\".slick-dots button\")[3],\n      new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true\n      })\n    );\n    expect(getActiveSlidesText(container)[0]).toEqual(\"4\");\n    expect(getActiveSlidesCount(container)).toEqual(1);\n    expect(hasClass(getButtonsListItem(container)[3], \"slick-active\")).toEqual(\n      true\n    );\n  });\n});\n\ndescribe(\"Simple Slider Snapshots\", function() {\n  it(\"slider initial state\", function() {\n    const { container } = render(<SimpleSlider />);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"click on next button\", function() {\n    const { container } = render(<SimpleSlider />);\n    clickNext(container);\n    //expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"click on prev button\", function() {\n    const { container } = render(<SimpleSlider />);\n    clickPrevious(container);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  it(\"click on 3rd dot\", function() {\n    const { container } = render(<SimpleSlider />);\n    fireEvent(\n      getButtons(container)[2],\n      new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true\n      })\n    );\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "examples/__tests__/SlickGoTo.test.js",
    "content": "import React from \"react\";\nimport { fireEvent, getRoles, render } from \"@testing-library/react\";\nimport SlickGoTo from \"../SlickGoTo\";\nimport { activeSlide, getActiveSlides, getSlidesCount } from \"../../test-utils\";\n\ndescribe.skip(\"SlickGoTo\", () => {\n  it(\"should goto 2nd slide\", () => {\n    const { container } = render(<SlickGoTo />);\n    fireEvent.change(container.getElementsByTagName(\"input\")[0], {\n      target: { value: 1 }\n    });\n    let currentImg = Array.from(\n      getActiveSlide(container).getElementsByTagName(\"img\")\n    )[0];\n    expect(currentImg.getAttribute(\"src\")).toEqual(\n      \"/img/react-slick/abstract02.jpg\"\n    );\n  });\n  it(\"should goto 2nd slide, even if input is number in string format\", () => {\n    const { container } = render(<SlickGoTo />);\n    fireEvent.change(container.getElementsByTagName(\"input\")[0], {\n      target: { value: \"1\" }\n    });\n    let currentImg = Array.from(\n      getActiveSlide(container).getElementsByTagName(\"img\")\n    )[0];\n    expect(currentImg.getAttribute(\"src\")).toEqual(\n      \"/img/react-slick/abstract02.jpg\"\n    );\n  });\n  it(\"should remain at 1st slide\", () => {\n    const { container } = render(<SlickGoTo />);\n    fireEvent.change(container.getElementsByTagName(\"input\")[0], {\n      target: { value: 0 }\n    });\n    let currentImg = Array.from(\n      getActiveSlide(container).getElementsByTagName(\"img\")\n    )[0];\n    expect(currentImg.getAttribute(\"src\")).toEqual(\n      \"/img/react-slick/abstract01.jpg\"\n    );\n  });\n  it.skip(\"should go to 1st slide from another 3rd slide\", () => {\n    // skipped because two simultaneous clicks dont' work with css and speed>0\n    const wrapper = render(<SlickGoTo waitForAnimate={false} />);\n    wrapper.find(\"input\").simulate(\"change\", { target: { value: 3 } });\n    wrapper.find(\"input\").simulate(\"change\", { target: { value: 0 } });\n    expect(wrapper.find(\".slick-slide.slick-active img\").props().src).toEqual(\n      \"/img/react-slick/abstract01.jpg\"\n    );\n  });\n});\n"
  },
  {
    "path": "examples/__tests__/UnevenSets.test.js",
    "content": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport UnevenSetsFinite from \"../UnevenSetsFinite\";\nimport UnevenSetsInfinite from \"../UnevenSetsInfinite\";\nimport { html as beautify_html } from \"js-beautify\";\nimport {\n  getActiveSlides,\n  clickNext,\n  getActiveSlidesCount,\n  getButtonsLength,\n  getClonesCount,\n  getCurrentSlide,\n  getSlidesCount\n} from \"../../test-utils\";\n\ndescribe(\"UnevenSets Finite\", () => {\n  test(\"Counting test\", () => {\n    const { container } = render(<UnevenSetsFinite />);\n    let totalSlides = getSlidesCount(container);\n    let clonedSlides = getClonesCount(container);\n    let activeSlides = getActiveSlidesCount(container);\n    let dots = getButtonsLength(container);\n    expect(totalSlides).toEqual(6);\n    expect(clonedSlides).toEqual(0);\n    expect(activeSlides).toEqual(4);\n    expect(dots).toEqual(2);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  test(\"Positioning test\", () => {\n    const { container } = render(<UnevenSetsFinite />);\n    let currentSlide = getCurrentSlide(container);\n    let activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(0);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([0, 1, 2, 3]);\n    //expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  test(\"Activity test\", () => {\n    const { container } = render(<UnevenSetsFinite />);\n    let currentSlide = getCurrentSlide(container);\n    let activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(0);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([0, 1, 2, 3]);\n\n    clickNext(container);\n\n    currentSlide = getCurrentSlide(container);\n    activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(4);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([2, 3, 4, 5]);\n\n    clickNext(container);\n\n    currentSlide = getCurrentSlide(container);\n    activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(4);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([2, 3, 4, 5]);\n\n    //  expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n});\n\ndescribe(\"UnevenSets Infinite\", () => {\n  test(\"Counting test\", () => {\n    const { container } = render(<UnevenSetsInfinite />);\n    let totalSlides = getSlidesCount(container);\n    let clonedSlides = getClonesCount(container);\n    let activeSlides = getActiveSlidesCount(container);\n    let dots = getButtonsLength(container);\n    expect(totalSlides).toEqual(14);\n    expect(clonedSlides).toEqual(8);\n    expect(activeSlides).toEqual(4);\n    expect(dots).toEqual(2);\n    //  expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  test(\"Positioning test\", () => {\n    const { container } = render(<UnevenSetsInfinite />);\n    let currentSlide = getCurrentSlide(container);\n    let activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(0);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([0, 1, 2, 3]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n  test(\"Activity test\", () => {\n    const { container } = render(<UnevenSetsInfinite />);\n    let currentSlide = getCurrentSlide(container);\n    let activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(0);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([0, 1, 2, 3]);\n\n    clickNext(container);\n\n    currentSlide = getCurrentSlide(container);\n    activeslides = getActiveSlides(container);\n    expect(parseInt(currentSlide.getAttribute(\"data-index\"))).toEqual(4);\n    expect(\n      Array.from(activeslides).map(slide =>\n        parseInt(slide.getAttribute(\"data-index\"))\n      )\n    ).toEqual([4, 5, 6, 7]);\n    // expect(beautify_html(toString(container))).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "examples/config.js",
    "content": "// export const baseUrl =\n//   process.env.NODE_ENV === \"production\"\n//     ? \"https://s3.amazonaws.com/static.neostack.com/img/react-slick\"\n//     : \"/img/react-slick\";\n\nexport const baseUrl = \"/img/react-slick\";\n"
  },
  {
    "path": "gulpfile.js",
    "content": "\"use strict\";\n\nvar gulp = require(\"gulp\");\nvar del = require(\"del\");\nvar rename = require(\"gulp-rename\");\nvar webpack = require(\"webpack\");\nvar WebpackDevServer = require(\"webpack-dev-server\");\nvar assign = require(\"object-assign\");\nvar opn = require(\"opn\");\n\nvar UglifyJsPlugin = require(\"uglifyjs-webpack-plugin\");\n\nconst DEV_PORT = process.env.DEV_PORT || 8080;\n\ngulp.task(\"clean\", function() {\n  return del([\"./build/*\"]);\n});\n\ngulp.task(\"copy\", function() {\n  gulp.src(\"./docs/index.html\").pipe(gulp.dest(\"./build\"));\n  gulp.src(\"./docs/docs.css\").pipe(gulp.dest(\"./build\"));\n  gulp.src(\"./docs/slick.css\").pipe(gulp.dest(\"./build\"));\n  gulp.src(\"./docs/slick-theme.css\").pipe(gulp.dest(\"./build\"));\n  gulp.src(\"./docs/img/**/*\").pipe(gulp.dest(\"./build/img\"));\n  gulp\n    .src(\"./node_modules/slick-carousel/slick/fonts/*\")\n    .pipe(gulp.dest(\"./build/fonts\"));\n  return gulp\n    .src(\"./node_modules/slick-carousel/slick/ajax-loader.gif\")\n    .pipe(gulp.dest(\"./build\"));\n});\n\ngulp.task(\"prepare-playwright\", function() {\n  // Copy files to src-jsx directory with jsx extension\n  return gulp\n    .src(\"./src/**/*.js\")\n    .pipe(rename({ extname: \".jsx\" }))\n    .pipe(gulp.dest(\"./src-jsx\"));\n});\n\ngulp.task(\n  \"watch\",\n  gulp.series([\"copy\"], function(done) {\n    gulp.watch([\"./docs/index.html\"], gulp.parallel([\"copy\"]));\n    gulp.watch([\"./docs/docs.css\"], gulp.parallel([\"copy\"]));\n    gulp.watch([\"./docs/slick.css\"], gulp.parallel([\"copy\"]));\n    gulp.watch([\"./docs/slick-theme.css\"], gulp.parallel([\"copy\"]));\n    done();\n  })\n);\n\ngulp.task(\n  \"server\",\n  gulp.series([\"watch\", \"copy\"], function() {\n    console.log(\"Start\");\n    var myConfig = require(\"./webpack.config\");\n    if (process.env.SINGLE_DEMO) {\n      myConfig.entry = {\n        \"docs.js\": \"./docs/single-demo.js\"\n      };\n    }\n    myConfig.plugins = myConfig.plugins.concat(\n      new webpack.DefinePlugin({\n        \"process.env\": {\n          NODE_ENV: JSON.stringify(\"dev_docs\")\n        }\n      })\n    );\n\n    new WebpackDevServer(webpack(myConfig), {\n      contentBase: \"./build\",\n      hot: true,\n      stats: {\n        colors: true\n      }\n    }).listen(DEV_PORT, \"0.0.0.0\", function(err, result) {\n      if (err) {\n        console.log(err);\n      } else {\n        const server_url = `http://0.0.0.0:${DEV_PORT}`;\n        console.log(`> Dev Server started at ${server_url}`);\n        opn(server_url);\n      }\n    });\n  })\n);\n\n// gulp tasks for building dist files\ngulp.task(\"dist-clean\", function() {\n  return del([\"./dist/*\"]);\n});\n\nvar distConfig = require(\"./webpack.config.dist.js\");\ngulp.task(\"dist-unmin\", function(cb) {\n  var unminConfig = assign({}, distConfig);\n  unminConfig.output.filename = \"react-slick.js\";\n  unminConfig.mode = \"none\";\n  return webpack(unminConfig, function(err, stat) {\n    console.error(err);\n    cb();\n  });\n});\n\ngulp.task(\"dist-min\", function(cb) {\n  var minConfig = assign({}, distConfig);\n  minConfig.output.filename = \"react-slick.min.js\";\n  minConfig.plugins = minConfig.plugins.concat(\n    new UglifyJsPlugin({\n      cache: true,\n      parallel: true,\n      sourceMap: true,\n      uglifyOptions: {\n        warnings: false\n      }\n    })\n  );\n  return webpack(minConfig, function(err, stat) {\n    console.error(err);\n    cb();\n  });\n});\n\ngulp.task(\n  \"dist\",\n  gulp.series([\"dist-clean\", \"dist-unmin\", \"dist-min\"], function(done) {\n    done();\n  })\n);\n\ngulp.task(\"default\", gulp.series([\"watch\", \"server\"]));\n"
  },
  {
    "path": "jest.config.js",
    "content": "module.exports = {\n  testEnvironment: \"jsdom\",\n  setupFilesAfterEnv: [\"<rootDir>/test-setup.js\"],\n  testPathIgnorePatterns: [\"/node_modules/\", \"playwright-tests\"],\n  moduleNameMapper: {\n    \"react-slick\": \"<rootDir>/src/index.js\"\n  }\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-slick\",\n  \"version\": \"0.31.0\",\n  \"description\": \" React port of slick carousel\",\n  \"main\": \"./lib\",\n  \"files\": [\n    \"dist\",\n    \"lib\"\n  ],\n  \"scripts\": {\n    \"start\": \"NODE_OPTIONS=--openssl-legacy-provider gulp server\",\n    \"demo\": \"SINGLE_DEMO=true DEV_PORT=8000 NODE_OPTIONS=--openssl-legacy-provider gulp server\",\n    \"build-dev\": \"gulp clean && gulp copy && webpack\",\n    \"lib\": \"babel ./src --out-dir ./lib\",\n    \"build\": \"NODE_OPTIONS=--openssl-legacy-provider npm run lib && NODE_OPTIONS=--openssl-legacy-provider gulp dist\",\n    \"prepublishOnly\": \"npm run build\",\n    \"lint\": \"eslint src\",\n    \"gen\": \"node docs/scripts/generateExampleConfigs.js && node docs/scripts/generateExamples.js && xdg-open docs/jquery.html\",\n    \"precommit\": \"lint-staged\",\n    \"test\": \"jest\",\n    \"test-watch\": \"jest --watch\",\n    \"clear-jest\": \"jest --clearCache\",\n    \"test-ct\": \"npm run prepare-playwright && playwright test -c playwright-ct.config.js\",\n    \"test-clear\": \"jest --clearCache && rm -rf ./playwright/.cache\",\n    \"prepare-playwright\": \"rm -rf ./src-jsx && gulp prepare-playwright\"\n  },\n  \"author\": \"Kiran Abburi\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/akiran/react-slick.git\"\n  },\n  \"keywords\": [\n    \"slick\",\n    \"carousel\",\n    \"Image slider\",\n    \"orbit\",\n    \"slider\",\n    \"react-component\"\n  ],\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.0.0\",\n    \"@babel/core\": \"^7.16.0\",\n    \"@babel/eslint-parser\": \"^7.16.3\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.1.0\",\n    \"@babel/polyfill\": \"^7.0.0\",\n    \"@babel/preset-env\": \"^7.1.0\",\n    \"@babel/preset-react\": \"^7.0.0\",\n    \"@playwright/experimental-ct-react\": \"^1.49.1\",\n    \"@testing-library/jest-dom\": \"^5.16.4\",\n    \"@testing-library/react\": \"^16.1.0\",\n    \"@testing-library/user-event\": \"^14.3.0\",\n    \"@types/node\": \"^22.10.2\",\n    \"autoprefixer\": \"^7.1.2\",\n    \"babel-core\": \"^7.0.0-bridge.0\",\n    \"babel-jest\": \"^24.8.0\",\n    \"babel-loader\": \"^8.0.4\",\n    \"babel-preset-airbnb\": \"^2.1.1\",\n    \"css-loader\": \"^2.1.1\",\n    \"deepmerge\": \"^1.1.0\",\n    \"del\": \"^2.2.2\",\n    \"es5-shim\": \"^4.5.9\",\n    \"eslint\": \"^8.4.1\",\n    \"eslint-plugin-import\": \"^2.25.3\",\n    \"eslint-plugin-react\": \"^7.27.1\",\n    \"express\": \"^4.14.0\",\n    \"foundation-apps\": \"^1.2.0\",\n    \"gulp\": \"^4.0.0\",\n    \"gulp-rename\": \"^2.0.0\",\n    \"husky\": \"^0.14.3\",\n    \"jest\": \"^28.1.3\",\n    \"jest-environment-jsdom\": \"^28.1.3\",\n    \"js-beautify\": \"^1.7.5\",\n    \"json-loader\": \"^0.5.4\",\n    \"lint-staged\": \"^12.1.2\",\n    \"opn\": \"^5.4.0\",\n    \"postcss-loader\": \"^1.3.3\",\n    \"prettier\": \"^1.14.3\",\n    \"raf\": \"^3.4.0\",\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\",\n    \"regenerator-runtime\": \"^0.14.1\",\n    \"sinon\": \"^2.1.0\",\n    \"slick-carousel\": \"^1.8.1\",\n    \"style-loader\": \"^0.16.1\",\n    \"uglifyjs-webpack-plugin\": \"^2.0.1\",\n    \"webpack\": \"^4.21.0\",\n    \"webpack-cli\": \"^3.1.2\",\n    \"webpack-dev-server\": \"^3.1.9\",\n    \"why-did-you-update\": \"^0.1.1\"\n  },\n  \"dependencies\": {\n    \"classnames\": \"^2.2.5\",\n    \"json2mq\": \"^0.2.0\",\n    \"lodash.debounce\": \"^4.0.8\",\n    \"resize-observer-polyfill\": \"^1.5.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n    \"react-dom\": \"^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n  },\n  \"lint-staged\": {\n    \"*.{js,json,md}\": [\n      \"prettier --write\",\n      \"git add\"\n    ]\n  },\n  \"npmName\": \"react-slick\",\n  \"npmFileMap\": [\n    {\n      \"basePath\": \"/dist/\",\n      \"files\": [\n        \"*.js\"\n      ]\n    }\n  ],\n  \"bugs\": {\n    \"url\": \"https://github.com/akiran/react-slick/issues\"\n  },\n  \"homepage\": \"https://react-slick.neostack.com\",\n  \"collective\": {\n    \"type\": \"opencollective\",\n    \"url\": \"https://opencollective.com/react-slick\",\n    \"logo\": \"https://opencollective.com/opencollective/logo.txt\"\n  }\n}\n"
  },
  {
    "path": "playwright/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Testing Page</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./index.jsx\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "playwright/index.jsx",
    "content": "// Import styles, initialize component theme here.\n// import '../src/common.css';\n"
  },
  {
    "path": "playwright-ct.config.js",
    "content": "// @ts-check\nconst { defineConfig, devices } = require(\"@playwright/experimental-ct-react\");\n/**\n * @see https://playwright.dev/docs/test-configuration\n */\nmodule.exports = defineConfig({\n  testDir: \"./playwright-tests\",\n  // testDir: \"./tests-out\",\n  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */\n  snapshotDir: \"./__snapshots__\",\n  /* Maximum time one test can run for. */\n  timeout: 10 * 1000,\n  /* Run tests in files in parallel */\n  fullyParallel: true,\n  /* Fail the build on CI if you accidentally left test.only in the source code. */\n  forbidOnly: !!process.env.CI,\n  /* Retry on CI only */\n  retries: process.env.CI ? 2 : 0,\n  /* Opt out of parallel tests on CI. */\n  workers: process.env.CI ? 1 : undefined,\n  /* Reporter to use. See https://playwright.dev/docs/test-reporters */\n  reporter: \"html\",\n  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */\n  use: {\n    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */\n    trace: \"on-first-retry\",\n\n    /* Port to use for Playwright component endpoint. */\n    ctPort: 3100\n  },\n\n  /* Configure projects for major browsers */\n  projects: [\n    {\n      name: \"chromium\",\n      use: { ...devices[\"Desktop Chrome\"] }\n    }\n    // {\n    //   name: \"firefox\",\n    //   use: { ...devices[\"Desktop Firefox\"] }\n    // },\n    // {\n    //   name: \"webkit\",\n    //   use: { ...devices[\"Desktop Safari\"] }\n    // }\n  ]\n});\n"
  },
  {
    "path": "playwright-tests/features/responsive/responsive.spec.tsx",
    "content": "import { test, expect } from \"@playwright/experimental-ct-react\";\nimport Responsive from \"./responsive.story\";\n\ntest.use({ viewport: { width: 1200, height: 500 } });\n\nasync function activeSlidesCount(component) {\n  return await component.locator(\".slick-slide.slick-active\").count();\n}\n\ntest(\"Responsive settings\", async ({ mount, page }) => {\n  const component = await mount(<Responsive />);\n\n  await expect(await activeSlidesCount(component)).toEqual(4);\n\n  await page.setViewportSize({ width: 1000, height: 500 });\n  await page.waitForTimeout(100);\n  await expect(await activeSlidesCount(component)).toEqual(3);\n\n  await page.setViewportSize({ width: 600, height: 500 });\n  await page.waitForTimeout(100);\n  await expect(await activeSlidesCount(component)).toEqual(2);\n\n  await page.setViewportSize({ width: 400, height: 500 });\n  await page.waitForTimeout(100);\n  await expect(await activeSlidesCount(component)).toEqual(1);\n\n  await page.setViewportSize({ width: 600, height: 500 });\n  await page.waitForTimeout(100);\n  await expect(await activeSlidesCount(component)).toEqual(2);\n\n  await page.setViewportSize({ width: 1000, height: 500 });\n  await page.waitForTimeout(100);\n  await expect(await activeSlidesCount(component)).toEqual(3);\n\n  await page.setViewportSize({ width: 1500, height: 500 });\n  await page.waitForTimeout(100);\n  await expect(await activeSlidesCount(component)).toEqual(4);\n});\n"
  },
  {
    "path": "playwright-tests/features/responsive/responsive.story.tsx",
    "content": "import React from \"react\";\nimport Slider from \"../../../src-jsx\";\n\nfunction Responsive() {\n  var settings = {\n    dots: true,\n    infinite: false,\n    speed: 500,\n    slidesToShow: 4,\n    slidesToScroll: 4,\n    initialSlide: 0,\n    responsive: [\n      {\n        breakpoint: 1024,\n        settings: {\n          slidesToShow: 3,\n          slidesToScroll: 3,\n          infinite: true,\n          dots: true\n        }\n      },\n      {\n        breakpoint: 600,\n        settings: {\n          slidesToShow: 2,\n          slidesToScroll: 2,\n          initialSlide: 2\n        }\n      },\n      {\n        breakpoint: 480,\n        settings: {\n          slidesToShow: 1,\n          slidesToScroll: 1\n        }\n      }\n    ]\n  };\n  return (\n    <div className=\"slider-container\">\n      <Slider {...settings}>\n        <div>\n          <h3>1</h3>\n        </div>\n        <div>\n          <h3>2</h3>\n        </div>\n        <div>\n          <h3>3</h3>\n        </div>\n        <div>\n          <h3>4</h3>\n        </div>\n        <div>\n          <h3>5</h3>\n        </div>\n        <div>\n          <h3>6</h3>\n        </div>\n        <div>\n          <h3>7</h3>\n        </div>\n        <div>\n          <h3>8</h3>\n        </div>\n      </Slider>\n    </div>\n  );\n}\n\nexport default Responsive;\n"
  },
  {
    "path": "playwright-tests/regression/fix-1930/fix-1930.spec.tsx",
    "content": "// Test fix of #1930: Extra height of slider in vertical mode when number of slides is less than or equal to slidesToShow\n\nimport { test, expect } from \"@playwright/experimental-ct-react\";\nimport { VerticalModeFinite, VerticalModeInfinite } from \"./fix-1930.story\";\n\ntest.use({ viewport: { width: 500, height: 500 } });\n\ntest(\"height check in vertical mode when slides < slidesToShow and finite\", async ({\n  mount\n}) => {\n  const component = await mount(<VerticalModeFinite />);\n\n  const track = component.locator(\".slick-track\").first();\n  const box = await track.boundingBox();\n  await expect(box.height).toEqual(200);\n});\n\ntest(\"height check in vertical mode when slides < slidesToShow and infinite\", async ({\n  mount\n}) => {\n  const component = await mount(<VerticalModeInfinite />);\n\n  const track = component.locator(\".slick-track\").first();\n  const box = await track.boundingBox();\n  await expect(box.height).toEqual(200);\n});\n"
  },
  {
    "path": "playwright-tests/regression/fix-1930/fix-1930.story.tsx",
    "content": "import Slider from \"../../../src-jsx\";\nimport React from \"react\";\n\nexport function VerticalModeFinite() {\n  const settings = {\n    dots: true,\n    infinite: false,\n    vertical: true,\n    slidesToShow: 3\n  };\n  return (\n    <Slider {...settings}>\n      <div>\n        <div style={{ height: 100 }}>1</div>\n      </div>\n      <div>\n        <div style={{ height: 100 }}>2</div>\n      </div>\n    </Slider>\n  );\n}\n\nexport function VerticalModeInfinite() {\n  const settings = {\n    dots: true,\n    infinite: true,\n    vertical: true,\n    slidesToShow: 3\n  };\n  return (\n    <Slider {...settings}>\n      <div>\n        <div style={{ height: 100 }}>1</div>\n      </div>\n      <div>\n        <div style={{ height: 100 }}>2</div>\n      </div>\n    </Slider>\n  );\n}\n"
  },
  {
    "path": "playwright-tests/sample/sample.spec.tsx",
    "content": "//Imports the test and expect functions from the Playwright ct-react module\nimport { test, expect } from \"@playwright/experimental-ct-react\";\n//Imports the App component to test from the relative ../App path\nimport App from \"./sample.story\";\n\n//Configures the viewport to a 500x500 size\ntest.use({ viewport: { width: 500, height: 500 } });\n//Starts a test case named \"should work\" which will run asynchronously,\n//mount function binding is destructured from test parameter\ntest(\"Sample playwright test\", async ({ mount }) => {\n  //Uses mount() to instantiate the <App /> component in isolation\n  const component = await mount(<App></App>);\n  //Asserts that component contains expected \"Learn React\" text on it verifying basic render.\n  await expect(component).toContainText(\"Learn React\");\n});\n"
  },
  {
    "path": "playwright-tests/sample/sample.story.tsx",
    "content": "import React from \"react\";\n\nexport default function App() {\n  return <div>Learn React</div>;\n}\n"
  },
  {
    "path": "src/arrows.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport classnames from \"classnames\";\nimport { canGoNext } from \"./utils/innerSliderUtils\";\n\nexport class PrevArrow extends React.PureComponent {\n  clickHandler(options, e) {\n    if (e) {\n      e.preventDefault();\n    }\n    this.props.clickHandler(options, e);\n  }\n  render() {\n    let prevClasses = { \"slick-arrow\": true, \"slick-prev\": true };\n    let prevHandler = this.clickHandler.bind(this, { message: \"previous\" });\n\n    if (\n      !this.props.infinite &&\n      (this.props.currentSlide === 0 ||\n        this.props.slideCount <= this.props.slidesToShow)\n    ) {\n      prevClasses[\"slick-disabled\"] = true;\n      prevHandler = null;\n    }\n\n    let prevArrowProps = {\n      key: \"0\",\n      \"data-role\": \"none\",\n      className: classnames(prevClasses),\n      style: { display: \"block\" },\n      onClick: prevHandler\n    };\n    let customProps = {\n      currentSlide: this.props.currentSlide,\n      slideCount: this.props.slideCount\n    };\n    let prevArrow;\n\n    if (this.props.prevArrow) {\n      prevArrow = React.cloneElement(this.props.prevArrow, {\n        ...prevArrowProps,\n        ...customProps\n      });\n    } else {\n      prevArrow = (\n        <button key=\"0\" type=\"button\" {...prevArrowProps}>\n          {\" \"}\n          Previous\n        </button>\n      );\n    }\n\n    return prevArrow;\n  }\n}\n\nexport class NextArrow extends React.PureComponent {\n  clickHandler(options, e) {\n    if (e) {\n      e.preventDefault();\n    }\n    this.props.clickHandler(options, e);\n  }\n  render() {\n    let nextClasses = { \"slick-arrow\": true, \"slick-next\": true };\n    let nextHandler = this.clickHandler.bind(this, { message: \"next\" });\n\n    if (!canGoNext(this.props)) {\n      nextClasses[\"slick-disabled\"] = true;\n      nextHandler = null;\n    }\n\n    let nextArrowProps = {\n      key: \"1\",\n      \"data-role\": \"none\",\n      className: classnames(nextClasses),\n      style: { display: \"block\" },\n      onClick: nextHandler\n    };\n    let customProps = {\n      currentSlide: this.props.currentSlide,\n      slideCount: this.props.slideCount\n    };\n    let nextArrow;\n\n    if (this.props.nextArrow) {\n      nextArrow = React.cloneElement(this.props.nextArrow, {\n        ...nextArrowProps,\n        ...customProps\n      });\n    } else {\n      nextArrow = (\n        <button key=\"1\" type=\"button\" {...nextArrowProps}>\n          {\" \"}\n          Next\n        </button>\n      );\n    }\n\n    return nextArrow;\n  }\n}\n"
  },
  {
    "path": "src/default-props.js",
    "content": "import React from \"react\";\n\nlet defaultProps = {\n  accessibility: true,\n  adaptiveHeight: false,\n  afterChange: null,\n  appendDots: dots => <ul style={{ display: \"block\" }}>{dots}</ul>,\n  arrows: true,\n  autoplay: false,\n  autoplaySpeed: 3000,\n  beforeChange: null,\n  centerMode: false,\n  centerPadding: \"50px\",\n  className: \"\",\n  cssEase: \"ease\",\n  customPaging: i => <button>{i + 1}</button>,\n  dots: false,\n  dotsClass: \"slick-dots\",\n  draggable: true,\n  easing: \"linear\",\n  edgeFriction: 0.35,\n  fade: false,\n  focusOnSelect: false,\n  infinite: true,\n  initialSlide: 0,\n  lazyLoad: null,\n  nextArrow: null,\n  onEdge: null,\n  onInit: null,\n  onLazyLoadError: null,\n  onReInit: null,\n  pauseOnDotsHover: false,\n  pauseOnFocus: false,\n  pauseOnHover: true,\n  prevArrow: null,\n  responsive: null,\n  rows: 1,\n  rtl: false,\n  slide: \"div\",\n  slidesPerRow: 1,\n  slidesToScroll: 1,\n  slidesToShow: 1,\n  speed: 500,\n  swipe: true,\n  swipeEvent: null,\n  swipeToSlide: false,\n  touchMove: true,\n  touchThreshold: 5,\n  useCSS: true,\n  useTransform: true,\n  variableWidth: false,\n  vertical: false,\n  verticalSwiping: false,\n  waitForAnimate: true,\n  asNavFor: null,\n  unslick: false\n};\n\nexport default defaultProps;\n"
  },
  {
    "path": "src/dots.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport classnames from \"classnames\";\nimport { clamp } from \"./utils/innerSliderUtils\";\n\nconst getDotCount = spec => {\n  let dots;\n\n  if (spec.infinite) {\n    dots = Math.ceil(spec.slideCount / spec.slidesToScroll);\n  } else {\n    dots =\n      Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) +\n      1;\n  }\n\n  return dots;\n};\n\nexport class Dots extends React.PureComponent {\n  clickHandler(options, e) {\n    // In Autoplay the focus stays on clicked button even after transition\n    // to next slide. That only goes away by click somewhere outside\n    e.preventDefault();\n    this.props.clickHandler(options);\n  }\n  render() {\n    const {\n      onMouseEnter,\n      onMouseOver,\n      onMouseLeave,\n      infinite,\n      slidesToScroll,\n      slidesToShow,\n      slideCount,\n      currentSlide\n    } = this.props;\n    let dotCount = getDotCount({\n      slideCount,\n      slidesToScroll,\n      slidesToShow,\n      infinite\n    });\n\n    const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };\n    let dots = [];\n    for (let i = 0; i < dotCount; i++) {\n      let _rightBound = (i + 1) * slidesToScroll - 1;\n      let rightBound = infinite\n        ? _rightBound\n        : clamp(_rightBound, 0, slideCount - 1);\n      let _leftBound = rightBound - (slidesToScroll - 1);\n      let leftBound = infinite\n        ? _leftBound\n        : clamp(_leftBound, 0, slideCount - 1);\n\n      let className = classnames({\n        \"slick-active\": infinite\n          ? currentSlide >= leftBound && currentSlide <= rightBound\n          : currentSlide === leftBound\n      });\n\n      let dotOptions = {\n        message: \"dots\",\n        index: i,\n        slidesToScroll,\n        currentSlide\n      };\n\n      let onClick = this.clickHandler.bind(this, dotOptions);\n      dots = dots.concat(\n        <li key={i} className={className}>\n          {React.cloneElement(this.props.customPaging(i), { onClick })}\n        </li>\n      );\n    }\n\n    return React.cloneElement(this.props.appendDots(dots), {\n      className: this.props.dotsClass,\n      ...mouseEvents\n    });\n  }\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "import Slider from \"./slider\";\n\nexport default Slider;\n"
  },
  {
    "path": "src/initial-state.js",
    "content": "const initialState = {\n  animating: false,\n  autoplaying: null,\n  currentDirection: 0,\n  currentLeft: null,\n  currentSlide: 0,\n  direction: 1,\n  dragging: false,\n  edgeDragged: false,\n  initialized: false,\n  lazyLoadedList: [],\n  listHeight: null,\n  listWidth: null,\n  scrolling: false,\n  slideCount: null,\n  slideHeight: null,\n  slideWidth: null,\n  swipeLeft: null,\n  swiped: false, // used by swipeEvent. differentites between touch and swipe.\n  swiping: false,\n  touchObject: { startX: 0, startY: 0, curX: 0, curY: 0 },\n  trackStyle: {},\n  trackWidth: 0,\n  targetSlide: 0\n};\n\nexport default initialState;\n"
  },
  {
    "path": "src/inner-slider.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport initialState from \"./initial-state\";\nimport debounce from \"lodash.debounce\";\nimport classnames from \"classnames\";\nimport {\n  getOnDemandLazySlides,\n  extractObject,\n  initializedState,\n  getHeight,\n  canGoNext,\n  slideHandler,\n  changeSlide,\n  keyHandler,\n  swipeStart,\n  swipeMove,\n  swipeEnd,\n  getPreClones,\n  getPostClones,\n  getTrackLeft,\n  getTrackCSS\n} from \"./utils/innerSliderUtils\";\n\nimport { Track } from \"./track\";\nimport { Dots } from \"./dots\";\nimport { PrevArrow, NextArrow } from \"./arrows\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nexport class InnerSlider extends React.Component {\n  constructor(props) {\n    super(props);\n    this.list = null;\n    this.track = null;\n    this.state = {\n      ...initialState,\n      currentSlide: this.props.initialSlide,\n      targetSlide: this.props.initialSlide ? this.props.initialSlide : 0,\n      slideCount: React.Children.count(this.props.children)\n    };\n    this.callbackTimers = [];\n    this.clickable = true;\n    this.debouncedResize = null;\n    const ssrState = this.ssrInit();\n    this.state = { ...this.state, ...ssrState };\n  }\n  listRefHandler = ref => (this.list = ref);\n  trackRefHandler = ref => (this.track = ref);\n  adaptHeight = () => {\n    if (this.props.adaptiveHeight && this.list) {\n      const elem = this.list.querySelector(\n        `[data-index=\"${this.state.currentSlide}\"]`\n      );\n      this.list.style.height = getHeight(elem) + \"px\";\n    }\n  };\n  componentDidMount = () => {\n    this.props.onInit && this.props.onInit();\n    if (this.props.lazyLoad) {\n      let slidesToLoad = getOnDemandLazySlides({\n        ...this.props,\n        ...this.state\n      });\n      if (slidesToLoad.length > 0) {\n        this.setState(prevState => ({\n          lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)\n        }));\n        if (this.props.onLazyLoad) {\n          this.props.onLazyLoad(slidesToLoad);\n        }\n      }\n    }\n    let spec = { listRef: this.list, trackRef: this.track, ...this.props };\n    this.updateState(spec, true, () => {\n      this.adaptHeight();\n      this.props.autoplay && this.autoPlay(\"update\");\n    });\n    if (this.props.lazyLoad === \"progressive\") {\n      this.lazyLoadTimer = setInterval(this.progressiveLazyLoad, 1000);\n    }\n    this.ro = new ResizeObserver(() => {\n      if (this.state.animating) {\n        this.onWindowResized(false); // don't set trackStyle hence don't break animation\n        this.callbackTimers.push(\n          setTimeout(() => this.onWindowResized(), this.props.speed)\n        );\n      } else {\n        this.onWindowResized();\n      }\n    });\n    this.ro.observe(this.list);\n    document.querySelectorAll &&\n      Array.prototype.forEach.call(\n        document.querySelectorAll(\".slick-slide\"),\n        slide => {\n          slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null;\n          slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null;\n        }\n      );\n    if (window.addEventListener) {\n      window.addEventListener(\"resize\", this.onWindowResized);\n    } else {\n      window.attachEvent(\"onresize\", this.onWindowResized);\n    }\n  };\n  componentWillUnmount = () => {\n    if (this.animationEndCallback) {\n      clearTimeout(this.animationEndCallback);\n    }\n    if (this.lazyLoadTimer) {\n      clearInterval(this.lazyLoadTimer);\n    }\n    if (this.callbackTimers.length) {\n      this.callbackTimers.forEach(timer => clearTimeout(timer));\n      this.callbackTimers = [];\n    }\n    if (window.addEventListener) {\n      window.removeEventListener(\"resize\", this.onWindowResized);\n    } else {\n      window.detachEvent(\"onresize\", this.onWindowResized);\n    }\n    if (this.autoplayTimer) {\n      clearInterval(this.autoplayTimer);\n    }\n    this.ro.disconnect();\n  };\n\n  didPropsChange(prevProps) {\n    let setTrackStyle = false;\n    for (let key of Object.keys(this.props)) {\n      if (!prevProps.hasOwnProperty(key)) {\n        setTrackStyle = true;\n        break;\n      }\n      if (\n        typeof prevProps[key] === \"object\" ||\n        typeof prevProps[key] === \"function\" ||\n        isNaN(prevProps[key])\n      ) {\n        continue;\n      }\n      if (prevProps[key] !== this.props[key]) {\n        setTrackStyle = true;\n        break;\n      }\n    }\n    return (\n      setTrackStyle ||\n      React.Children.count(this.props.children) !==\n        React.Children.count(prevProps.children)\n    );\n  }\n\n  componentDidUpdate = prevProps => {\n    this.checkImagesLoad();\n    this.props.onReInit && this.props.onReInit();\n    if (this.props.lazyLoad) {\n      let slidesToLoad = getOnDemandLazySlides({\n        ...this.props,\n        ...this.state\n      });\n      if (slidesToLoad.length > 0) {\n        this.setState(prevState => ({\n          lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)\n        }));\n        if (this.props.onLazyLoad) {\n          this.props.onLazyLoad(slidesToLoad);\n        }\n      }\n    }\n    // if (this.props.onLazyLoad) {\n    //   this.props.onLazyLoad([leftMostSlide])\n    // }\n    this.adaptHeight();\n    let spec = {\n      listRef: this.list,\n      trackRef: this.track,\n      ...this.props,\n      ...this.state\n    };\n    const setTrackStyle = this.didPropsChange(prevProps);\n    setTrackStyle &&\n      this.updateState(spec, setTrackStyle, () => {\n        if (\n          this.state.currentSlide >= React.Children.count(this.props.children)\n        ) {\n          this.changeSlide({\n            message: \"index\",\n            index:\n              React.Children.count(this.props.children) -\n              this.props.slidesToShow,\n            currentSlide: this.state.currentSlide\n          });\n        }\n        if (this.props.autoplay) {\n          this.autoPlay(\"update\");\n        } else {\n          this.pause(\"paused\");\n        }\n      });\n  };\n  onWindowResized = setTrackStyle => {\n    if (this.debouncedResize) this.debouncedResize.cancel();\n    this.debouncedResize = debounce(() => this.resizeWindow(setTrackStyle), 50);\n    this.debouncedResize();\n  };\n  resizeWindow = (setTrackStyle = true) => {\n    const isTrackMounted = Boolean(this.track && this.track.node);\n    // prevent warning: setting state on unmounted component (server side rendering)\n    if (!isTrackMounted) return;\n    let spec = {\n      listRef: this.list,\n      trackRef: this.track,\n      ...this.props,\n      ...this.state\n    };\n    this.updateState(spec, setTrackStyle, () => {\n      if (this.props.autoplay) this.autoPlay(\"update\");\n      else this.pause(\"paused\");\n    });\n    // animating state should be cleared while resizing, otherwise autoplay stops working\n    this.setState({\n      animating: false\n    });\n    clearTimeout(this.animationEndCallback);\n    delete this.animationEndCallback;\n  };\n  updateState = (spec, setTrackStyle, callback) => {\n    let updatedState = initializedState(spec);\n    spec = { ...spec, ...updatedState, slideIndex: updatedState.currentSlide };\n    let targetLeft = getTrackLeft(spec);\n    spec = { ...spec, left: targetLeft };\n    let trackStyle = getTrackCSS(spec);\n    if (\n      setTrackStyle ||\n      React.Children.count(this.props.children) !==\n        React.Children.count(spec.children)\n    ) {\n      updatedState[\"trackStyle\"] = trackStyle;\n    }\n    this.setState(updatedState, callback);\n  };\n\n  ssrInit = () => {\n    if (this.props.variableWidth) {\n      let trackWidth = 0,\n        trackLeft = 0;\n      let childrenWidths = [];\n      let preClones = getPreClones({\n        ...this.props,\n        ...this.state,\n        slideCount: this.props.children.length\n      });\n      let postClones = getPostClones({\n        ...this.props,\n        ...this.state,\n        slideCount: this.props.children.length\n      });\n      this.props.children.forEach(child => {\n        childrenWidths.push(child.props.style.width);\n        trackWidth += child.props.style.width;\n      });\n      for (let i = 0; i < preClones; i++) {\n        trackLeft += childrenWidths[childrenWidths.length - 1 - i];\n        trackWidth += childrenWidths[childrenWidths.length - 1 - i];\n      }\n      for (let i = 0; i < postClones; i++) {\n        trackWidth += childrenWidths[i];\n      }\n      for (let i = 0; i < this.state.currentSlide; i++) {\n        trackLeft += childrenWidths[i];\n      }\n      let trackStyle = {\n        width: trackWidth + \"px\",\n        left: -trackLeft + \"px\"\n      };\n      if (this.props.centerMode) {\n        let currentWidth = `${childrenWidths[this.state.currentSlide]}px`;\n        trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 ) `;\n      }\n      return {\n        trackStyle\n      };\n    }\n    let childrenCount = React.Children.count(this.props.children);\n    const spec = { ...this.props, ...this.state, slideCount: childrenCount };\n    let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount;\n    let trackWidth = (100 / this.props.slidesToShow) * slideCount;\n    let slideWidth = 100 / slideCount;\n    let trackLeft =\n      (-slideWidth *\n        (getPreClones(spec) + this.state.currentSlide) *\n        trackWidth) /\n      100;\n    if (this.props.centerMode) {\n      trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2;\n    }\n    let trackStyle = {\n      width: trackWidth + \"%\",\n      left: trackLeft + \"%\"\n    };\n    return {\n      slideWidth: slideWidth + \"%\",\n      trackStyle: trackStyle\n    };\n  };\n  checkImagesLoad = () => {\n    let images =\n      (this.list &&\n        this.list.querySelectorAll &&\n        this.list.querySelectorAll(\".slick-slide img\")) ||\n      [];\n    let imagesCount = images.length,\n      loadedCount = 0;\n    Array.prototype.forEach.call(images, image => {\n      const handler = () =>\n        ++loadedCount && loadedCount >= imagesCount && this.onWindowResized();\n      if (!image.onclick) {\n        image.onclick = () => image.parentNode.focus();\n      } else {\n        const prevClickHandler = image.onclick;\n        image.onclick = e => {\n          prevClickHandler(e);\n          image.parentNode.focus();\n        };\n      }\n      if (!image.onload) {\n        if (this.props.lazyLoad) {\n          image.onload = () => {\n            this.adaptHeight();\n            this.callbackTimers.push(\n              setTimeout(this.onWindowResized, this.props.speed)\n            );\n          };\n        } else {\n          image.onload = handler;\n          image.onerror = () => {\n            handler();\n            this.props.onLazyLoadError && this.props.onLazyLoadError();\n          };\n        }\n      }\n    });\n  };\n  progressiveLazyLoad = () => {\n    let slidesToLoad = [];\n    const spec = { ...this.props, ...this.state };\n    for (\n      let index = this.state.currentSlide;\n      index < this.state.slideCount + getPostClones(spec);\n      index++\n    ) {\n      if (this.state.lazyLoadedList.indexOf(index) < 0) {\n        slidesToLoad.push(index);\n        break;\n      }\n    }\n    for (\n      let index = this.state.currentSlide - 1;\n      index >= -getPreClones(spec);\n      index--\n    ) {\n      if (this.state.lazyLoadedList.indexOf(index) < 0) {\n        slidesToLoad.push(index);\n        break;\n      }\n    }\n    if (slidesToLoad.length > 0) {\n      this.setState(state => ({\n        lazyLoadedList: state.lazyLoadedList.concat(slidesToLoad)\n      }));\n      if (this.props.onLazyLoad) {\n        this.props.onLazyLoad(slidesToLoad);\n      }\n    } else {\n      if (this.lazyLoadTimer) {\n        clearInterval(this.lazyLoadTimer);\n        delete this.lazyLoadTimer;\n      }\n    }\n  };\n  slideHandler = (index, dontAnimate = false) => {\n    const {\n      asNavFor,\n      beforeChange,\n      onLazyLoad,\n      speed,\n      afterChange\n    } = this.props;\n    // capture currentslide before state is updated\n    const currentSlide = this.state.currentSlide;\n    let { state, nextState } = slideHandler({\n      index,\n      ...this.props,\n      ...this.state,\n      trackRef: this.track,\n      useCSS: this.props.useCSS && !dontAnimate\n    });\n    if (!state) return;\n    beforeChange && beforeChange(currentSlide, state.currentSlide);\n    let slidesToLoad = state.lazyLoadedList.filter(\n      value => this.state.lazyLoadedList.indexOf(value) < 0\n    );\n    onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad);\n    if (!this.props.waitForAnimate && this.animationEndCallback) {\n      clearTimeout(this.animationEndCallback);\n      afterChange && afterChange(currentSlide);\n      delete this.animationEndCallback;\n    }\n    this.setState(state, () => {\n      // asNavForIndex check is to avoid recursive calls of slideHandler in waitForAnimate=false mode\n      if (asNavFor && this.asNavForIndex !== index) {\n        this.asNavForIndex = index;\n        asNavFor.innerSlider.slideHandler(index);\n      }\n      if (!nextState) return;\n      this.animationEndCallback = setTimeout(() => {\n        const { animating, ...firstBatch } = nextState;\n        this.setState(firstBatch, () => {\n          this.callbackTimers.push(\n            setTimeout(() => this.setState({ animating }), 10)\n          );\n          afterChange && afterChange(state.currentSlide);\n          delete this.animationEndCallback;\n        });\n      }, speed);\n    });\n  };\n  changeSlide = (options, dontAnimate = false) => {\n    const spec = { ...this.props, ...this.state };\n    let targetSlide = changeSlide(spec, options);\n    if (targetSlide !== 0 && !targetSlide) return;\n    if (dontAnimate === true) {\n      this.slideHandler(targetSlide, dontAnimate);\n    } else {\n      this.slideHandler(targetSlide);\n    }\n    this.props.autoplay && this.autoPlay(\"update\");\n    if (this.props.focusOnSelect) {\n      const nodes = this.list.querySelectorAll(\".slick-current\");\n      nodes[0] && nodes[0].focus();\n    }\n  };\n  clickHandler = e => {\n    if (this.clickable === false) {\n      e.stopPropagation();\n      e.preventDefault();\n    }\n    this.clickable = true;\n  };\n  keyHandler = e => {\n    let dir = keyHandler(e, this.props.accessibility, this.props.rtl);\n    dir !== \"\" && this.changeSlide({ message: dir });\n  };\n  selectHandler = options => {\n    this.changeSlide(options);\n  };\n  disableBodyScroll = () => {\n    const preventDefault = e => {\n      e = e || window.event;\n      if (e.preventDefault) e.preventDefault();\n      e.returnValue = false;\n    };\n    window.ontouchmove = preventDefault;\n  };\n  enableBodyScroll = () => {\n    window.ontouchmove = null;\n  };\n  swipeStart = e => {\n    if (this.props.verticalSwiping) {\n      this.disableBodyScroll();\n    }\n    let state = swipeStart(e, this.props.swipe, this.props.draggable);\n    state !== \"\" && this.setState(state);\n  };\n  swipeMove = e => {\n    let state = swipeMove(e, {\n      ...this.props,\n      ...this.state,\n      trackRef: this.track,\n      listRef: this.list,\n      slideIndex: this.state.currentSlide\n    });\n    if (!state) return;\n    if (state[\"swiping\"]) {\n      this.clickable = false;\n    }\n    this.setState(state);\n  };\n  swipeEnd = e => {\n    let state = swipeEnd(e, {\n      ...this.props,\n      ...this.state,\n      trackRef: this.track,\n      listRef: this.list,\n      slideIndex: this.state.currentSlide\n    });\n    if (!state) return;\n    let triggerSlideHandler = state[\"triggerSlideHandler\"];\n    delete state[\"triggerSlideHandler\"];\n    this.setState(state);\n    if (triggerSlideHandler === undefined) return;\n    this.slideHandler(triggerSlideHandler);\n    if (this.props.verticalSwiping) {\n      this.enableBodyScroll();\n    }\n  };\n  touchEnd = e => {\n    this.swipeEnd(e);\n    this.clickable = true;\n  };\n  slickPrev = () => {\n    // this and fellow methods are wrapped in setTimeout\n    // to make sure initialize setState has happened before\n    // any of such methods are called\n    this.callbackTimers.push(\n      setTimeout(() => this.changeSlide({ message: \"previous\" }), 0)\n    );\n  };\n  slickNext = () => {\n    this.callbackTimers.push(\n      setTimeout(() => this.changeSlide({ message: \"next\" }), 0)\n    );\n  };\n  slickGoTo = (slide, dontAnimate = false) => {\n    slide = Number(slide);\n    if (isNaN(slide)) return \"\";\n    this.callbackTimers.push(\n      setTimeout(\n        () =>\n          this.changeSlide(\n            {\n              message: \"index\",\n              index: slide,\n              currentSlide: this.state.currentSlide\n            },\n            dontAnimate\n          ),\n        0\n      )\n    );\n  };\n  play = () => {\n    var nextIndex;\n    if (this.props.rtl) {\n      nextIndex = this.state.currentSlide - this.props.slidesToScroll;\n    } else {\n      if (canGoNext({ ...this.props, ...this.state })) {\n        nextIndex = this.state.currentSlide + this.props.slidesToScroll;\n      } else {\n        return false;\n      }\n    }\n\n    this.slideHandler(nextIndex);\n  };\n\n  autoPlay = playType => {\n    if (this.autoplayTimer) {\n      clearInterval(this.autoplayTimer);\n    }\n    const autoplaying = this.state.autoplaying;\n    if (playType === \"update\") {\n      if (\n        autoplaying === \"hovered\" ||\n        autoplaying === \"focused\" ||\n        autoplaying === \"paused\"\n      ) {\n        return;\n      }\n    } else if (playType === \"leave\") {\n      if (autoplaying === \"paused\" || autoplaying === \"focused\") {\n        return;\n      }\n    } else if (playType === \"blur\") {\n      if (autoplaying === \"paused\" || autoplaying === \"hovered\") {\n        return;\n      }\n    }\n    this.autoplayTimer = setInterval(this.play, this.props.autoplaySpeed + 50);\n    this.setState({ autoplaying: \"playing\" });\n  };\n  pause = pauseType => {\n    if (this.autoplayTimer) {\n      clearInterval(this.autoplayTimer);\n      this.autoplayTimer = null;\n    }\n    const autoplaying = this.state.autoplaying;\n    if (pauseType === \"paused\") {\n      this.setState({ autoplaying: \"paused\" });\n    } else if (pauseType === \"focused\") {\n      if (autoplaying === \"hovered\" || autoplaying === \"playing\") {\n        this.setState({ autoplaying: \"focused\" });\n      }\n    } else {\n      // pauseType  is 'hovered'\n      if (autoplaying === \"playing\") {\n        this.setState({ autoplaying: \"hovered\" });\n      }\n    }\n  };\n  onDotsOver = () => this.props.autoplay && this.pause(\"hovered\");\n  onDotsLeave = () =>\n    this.props.autoplay &&\n    this.state.autoplaying === \"hovered\" &&\n    this.autoPlay(\"leave\");\n  onTrackOver = () => this.props.autoplay && this.pause(\"hovered\");\n  onTrackLeave = () =>\n    this.props.autoplay &&\n    this.state.autoplaying === \"hovered\" &&\n    this.autoPlay(\"leave\");\n  onSlideFocus = () => this.props.autoplay && this.pause(\"focused\");\n  onSlideBlur = () =>\n    this.props.autoplay &&\n    this.state.autoplaying === \"focused\" &&\n    this.autoPlay(\"blur\");\n\n  render = () => {\n    var className = classnames(\"slick-slider\", this.props.className, {\n      \"slick-vertical\": this.props.vertical,\n      \"slick-initialized\": true\n    });\n    let spec = { ...this.props, ...this.state };\n    let trackProps = extractObject(spec, [\n      \"fade\",\n      \"cssEase\",\n      \"speed\",\n      \"infinite\",\n      \"centerMode\",\n      \"focusOnSelect\",\n      \"currentSlide\",\n      \"lazyLoad\",\n      \"lazyLoadedList\",\n      \"rtl\",\n      \"slideWidth\",\n      \"slideHeight\",\n      \"listHeight\",\n      \"vertical\",\n      \"slidesToShow\",\n      \"slidesToScroll\",\n      \"slideCount\",\n      \"trackStyle\",\n      \"variableWidth\",\n      \"unslick\",\n      \"centerPadding\",\n      \"targetSlide\",\n      \"useCSS\"\n    ]);\n    const { pauseOnHover } = this.props;\n    trackProps = {\n      ...trackProps,\n      onMouseEnter: pauseOnHover ? this.onTrackOver : null,\n      onMouseLeave: pauseOnHover ? this.onTrackLeave : null,\n      onMouseOver: pauseOnHover ? this.onTrackOver : null,\n      focusOnSelect:\n        this.props.focusOnSelect && this.clickable ? this.selectHandler : null\n    };\n\n    var dots;\n    if (\n      this.props.dots === true &&\n      this.state.slideCount >= this.props.slidesToShow\n    ) {\n      let dotProps = extractObject(spec, [\n        \"dotsClass\",\n        \"slideCount\",\n        \"slidesToShow\",\n        \"currentSlide\",\n        \"slidesToScroll\",\n        \"clickHandler\",\n        \"children\",\n        \"customPaging\",\n        \"infinite\",\n        \"appendDots\"\n      ]);\n      const { pauseOnDotsHover } = this.props;\n      dotProps = {\n        ...dotProps,\n        clickHandler: this.changeSlide,\n        onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null,\n        onMouseOver: pauseOnDotsHover ? this.onDotsOver : null,\n        onMouseLeave: pauseOnDotsHover ? this.onDotsLeave : null\n      };\n      dots = <Dots {...dotProps} />;\n    }\n\n    var prevArrow, nextArrow;\n    let arrowProps = extractObject(spec, [\n      \"infinite\",\n      \"centerMode\",\n      \"currentSlide\",\n      \"slideCount\",\n      \"slidesToShow\",\n      \"prevArrow\",\n      \"nextArrow\"\n    ]);\n    arrowProps.clickHandler = this.changeSlide;\n\n    if (this.props.arrows) {\n      prevArrow = <PrevArrow {...arrowProps} />;\n      nextArrow = <NextArrow {...arrowProps} />;\n    }\n\n    var verticalHeightStyle = null;\n\n    if (this.props.vertical) {\n      verticalHeightStyle = {\n        height: this.state.listHeight\n      };\n    }\n\n    var centerPaddingStyle = null;\n\n    if (this.props.vertical === false) {\n      if (this.props.centerMode === true) {\n        centerPaddingStyle = {\n          padding: \"0px \" + this.props.centerPadding\n        };\n      }\n    } else {\n      if (this.props.centerMode === true) {\n        centerPaddingStyle = {\n          padding: this.props.centerPadding + \" 0px\"\n        };\n      }\n    }\n\n    const listStyle = { ...verticalHeightStyle, ...centerPaddingStyle };\n    const touchMove = this.props.touchMove;\n    let listProps = {\n      className: \"slick-list\",\n      style: listStyle,\n      onClick: this.clickHandler,\n      onMouseDown: touchMove ? this.swipeStart : null,\n      onMouseMove: this.state.dragging && touchMove ? this.swipeMove : null,\n      onMouseUp: touchMove ? this.swipeEnd : null,\n      onMouseLeave: this.state.dragging && touchMove ? this.swipeEnd : null,\n      onTouchStart: touchMove ? this.swipeStart : null,\n      onTouchMove: this.state.dragging && touchMove ? this.swipeMove : null,\n      onTouchEnd: touchMove ? this.touchEnd : null,\n      onTouchCancel: this.state.dragging && touchMove ? this.swipeEnd : null,\n      onKeyDown: this.props.accessibility ? this.keyHandler : null\n    };\n\n    let innerSliderProps = {\n      className: className,\n      dir: \"ltr\",\n      style: this.props.style\n    };\n\n    if (this.props.unslick) {\n      listProps = { className: \"slick-list\" };\n      innerSliderProps = { className, style: this.props.style };\n    }\n    return (\n      <div {...innerSliderProps}>\n        {!this.props.unslick ? prevArrow : \"\"}\n        <div ref={this.listRefHandler} {...listProps}>\n          <Track ref={this.trackRefHandler} {...trackProps}>\n            {this.props.children}\n          </Track>\n        </div>\n        {!this.props.unslick ? nextArrow : \"\"}\n        {!this.props.unslick ? dots : \"\"}\n      </div>\n    );\n  };\n}\n"
  },
  {
    "path": "src/slider.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport { InnerSlider } from \"./inner-slider\";\nimport json2mq from \"json2mq\";\nimport defaultProps from \"./default-props\";\nimport { canUseDOM, filterSettings } from \"./utils/innerSliderUtils\";\n\nexport default class Slider extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      breakpoint: null\n    };\n    this._responsiveMediaHandlers = [];\n  }\n\n  innerSliderRefHandler = ref => (this.innerSlider = ref);\n\n  media(query, handler) {\n    // javascript handler for  css media query\n    const mql = window.matchMedia(query);\n    const listener = ({ matches }) => {\n      if (matches) {\n        handler();\n      }\n    };\n    mql.addListener(listener);\n    this._responsiveMediaHandlers.push({ mql, query, listener });\n  }\n\n  // handles responsive breakpoints\n  componentDidMount() {\n    // performance monitoring\n    //if (process.env.NODE_ENV !== 'production') {\n    //const { whyDidYouUpdate } = require('why-did-you-update')\n    //whyDidYouUpdate(React)\n    //}\n    if (this.props.responsive) {\n      let breakpoints = this.props.responsive.map(\n        breakpt => breakpt.breakpoint\n      );\n      // sort them in increasing order of their numerical value\n      breakpoints.sort((x, y) => x - y);\n\n      breakpoints.forEach((breakpoint, index) => {\n        // media query for each breakpoint\n        let bQuery;\n        if (index === 0) {\n          bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });\n        } else {\n          bQuery = json2mq({\n            minWidth: breakpoints[index - 1] + 1,\n            maxWidth: breakpoint\n          });\n        }\n        // when not using server side rendering\n        canUseDOM() &&\n          this.media(bQuery, () => {\n            this.setState({ breakpoint: breakpoint });\n          });\n      });\n\n      // Register media query for full screen. Need to support resize from small to large\n      // convert javascript object to media query string\n      let query = json2mq({ minWidth: breakpoints.slice(-1)[0] });\n\n      canUseDOM() &&\n        this.media(query, () => {\n          this.setState({ breakpoint: null });\n        });\n    }\n  }\n\n  componentWillUnmount() {\n    this._responsiveMediaHandlers.forEach(function(obj) {\n      obj.mql.removeListener(obj.listener);\n    });\n  }\n\n  slickPrev = () => this.innerSlider.slickPrev();\n\n  slickNext = () => this.innerSlider.slickNext();\n\n  slickGoTo = (slide, dontAnimate = false) =>\n    this.innerSlider.slickGoTo(slide, dontAnimate);\n\n  slickPause = () => this.innerSlider.pause(\"paused\");\n\n  slickPlay = () => this.innerSlider.autoPlay(\"play\");\n\n  render() {\n    var settings;\n    var newProps;\n    if (this.state.breakpoint) {\n      newProps = this.props.responsive.filter(\n        resp => resp.breakpoint === this.state.breakpoint\n      );\n      settings =\n        newProps[0].settings === \"unslick\"\n          ? \"unslick\"\n          : { ...defaultProps, ...this.props, ...newProps[0].settings };\n    } else {\n      settings = { ...defaultProps, ...this.props };\n    }\n\n    // force scrolling by one if centerMode is on\n    if (settings.centerMode) {\n      if (\n        settings.slidesToScroll > 1 &&\n        process.env.NODE_ENV !== \"production\"\n      ) {\n        console.warn(\n          `slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}`\n        );\n      }\n      settings.slidesToScroll = 1;\n    }\n    // force showing one slide and scrolling by one if the fade mode is on\n    if (settings.fade) {\n      if (settings.slidesToShow > 1 && process.env.NODE_ENV !== \"production\") {\n        console.warn(\n          `slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}`\n        );\n      }\n      if (\n        settings.slidesToScroll > 1 &&\n        process.env.NODE_ENV !== \"production\"\n      ) {\n        console.warn(\n          `slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}`\n        );\n      }\n      settings.slidesToShow = 1;\n      settings.slidesToScroll = 1;\n    }\n\n    // makes sure that children is an array, even when there is only 1 child\n    let children = React.Children.toArray(this.props.children);\n\n    // Children may contain false or null, so we should filter them\n    // children may also contain string filled with spaces (in certain cases where we use jsx strings)\n    children = children.filter(child => {\n      if (typeof child === \"string\") {\n        return !!child.trim();\n      }\n      return !!child;\n    });\n\n    // rows and slidesPerRow logic is handled here\n    if (\n      settings.variableWidth &&\n      (settings.rows > 1 || settings.slidesPerRow > 1)\n    ) {\n      console.warn(\n        `variableWidth is not supported in case of rows > 1 or slidesPerRow > 1`\n      );\n      settings.variableWidth = false;\n    }\n    let newChildren = [];\n    let currentWidth = null;\n    for (\n      let i = 0;\n      i < children.length;\n      i += settings.rows * settings.slidesPerRow\n    ) {\n      let newSlide = [];\n      for (\n        let j = i;\n        j < i + settings.rows * settings.slidesPerRow;\n        j += settings.slidesPerRow\n      ) {\n        let row = [];\n        for (let k = j; k < j + settings.slidesPerRow; k += 1) {\n          if (settings.variableWidth && children[k].props.style) {\n            currentWidth = children[k].props.style.width;\n          }\n          if (k >= children.length) break;\n          row.push(\n            React.cloneElement(children[k], {\n              key: 100 * i + 10 * j + k,\n              tabIndex: -1,\n              style: {\n                width: `${100 / settings.slidesPerRow}%`,\n                display: \"inline-block\"\n              }\n            })\n          );\n        }\n        newSlide.push(<div key={10 * i + j}>{row}</div>);\n      }\n      if (settings.variableWidth) {\n        newChildren.push(\n          <div key={i} style={{ width: currentWidth }}>\n            {newSlide}\n          </div>\n        );\n      } else {\n        newChildren.push(<div key={i}>{newSlide}</div>);\n      }\n    }\n\n    if (settings === \"unslick\") {\n      const className = \"regular slider \" + (this.props.className || \"\");\n      return <div className={className}>{children}</div>;\n    } else if (newChildren.length <= settings.slidesToShow) {\n      settings.unslick = true;\n    }\n    return (\n      <InnerSlider\n        style={this.props.style}\n        ref={this.innerSliderRefHandler}\n        {...filterSettings(settings)}\n      >\n        {newChildren}\n      </InnerSlider>\n    );\n  }\n}\n"
  },
  {
    "path": "src/track.js",
    "content": "\"use strict\";\n\nimport React from \"react\";\nimport classnames from \"classnames\";\nimport {\n  lazyStartIndex,\n  lazyEndIndex,\n  getPreClones,\n  getPostClones\n} from \"./utils/innerSliderUtils\";\n\n// given specifications/props for a slide, fetch all the classes that need to be applied to the slide\nconst getSlideClasses = spec => {\n  let slickActive, slickCenter, slickCloned;\n  let centerOffset, index;\n\n  if (spec.rtl) {\n    index = spec.slideCount - 1 - spec.index;\n  } else {\n    index = spec.index;\n  }\n  slickCloned = index < 0 || index >= spec.slideCount;\n  if (spec.centerMode) {\n    centerOffset = Math.floor(spec.slidesToShow / 2);\n    slickCenter = (index - spec.currentSlide) % spec.slideCount === 0;\n    if (\n      index > spec.currentSlide - centerOffset - 1 &&\n      index <= spec.currentSlide + centerOffset\n    ) {\n      slickActive = true;\n    }\n  } else {\n    slickActive =\n      spec.currentSlide <= index &&\n      index < spec.currentSlide + spec.slidesToShow;\n  }\n\n  let focusedSlide;\n  if (spec.targetSlide < 0) {\n    focusedSlide = spec.targetSlide + spec.slideCount;\n  } else if (spec.targetSlide >= spec.slideCount) {\n    focusedSlide = spec.targetSlide - spec.slideCount;\n  } else {\n    focusedSlide = spec.targetSlide;\n  }\n  let slickCurrent = index === focusedSlide;\n  return {\n    \"slick-slide\": true,\n    \"slick-active\": slickActive,\n    \"slick-center\": slickCenter,\n    \"slick-cloned\": slickCloned,\n    \"slick-current\": slickCurrent // dubious in case of RTL\n  };\n};\n\nconst getSlideStyle = spec => {\n  let style = {};\n\n  if (spec.variableWidth === undefined || spec.variableWidth === false) {\n    style.width = spec.slideWidth;\n  }\n\n  if (spec.fade) {\n    style.position = \"relative\";\n    if (spec.vertical) {\n      style.top = -spec.index * parseInt(spec.slideHeight);\n    } else {\n      style.left = -spec.index * parseInt(spec.slideWidth);\n    }\n    style.opacity = spec.currentSlide === spec.index ? 1 : 0;\n    style.zIndex = spec.currentSlide === spec.index ? 999 : 998;\n    if (spec.useCSS) {\n      style.transition =\n        \"opacity \" +\n        spec.speed +\n        \"ms \" +\n        spec.cssEase +\n        \", \" +\n        \"visibility \" +\n        spec.speed +\n        \"ms \" +\n        spec.cssEase;\n    }\n  }\n\n  return style;\n};\n\nconst getKey = (child, fallbackKey) => child.key || fallbackKey;\n\nconst renderSlides = spec => {\n  let key;\n  let slides = [];\n  let preCloneSlides = [];\n  let postCloneSlides = [];\n  let childrenCount = React.Children.count(spec.children);\n  let startIndex = lazyStartIndex(spec);\n  let endIndex = lazyEndIndex(spec);\n\n  React.Children.forEach(spec.children, (elem, index) => {\n    let child;\n    let childOnClickOptions = {\n      message: \"children\",\n      index: index,\n      slidesToScroll: spec.slidesToScroll,\n      currentSlide: spec.currentSlide\n    };\n\n    // in case of lazyLoad, whether or not we want to fetch the slide\n    if (\n      !spec.lazyLoad ||\n      (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)\n    ) {\n      child = elem;\n    } else {\n      child = <div />;\n    }\n    let childStyle = getSlideStyle({ ...spec, index });\n    let slideClass = child.props.className || \"\";\n    let slideClasses = getSlideClasses({ ...spec, index });\n    // push a cloned element of the desired slide\n    slides.push(\n      React.cloneElement(child, {\n        key: \"original\" + getKey(child, index),\n        \"data-index\": index,\n        className: classnames(slideClasses, slideClass),\n        tabIndex: \"-1\",\n        \"aria-hidden\": !slideClasses[\"slick-active\"],\n        style: { outline: \"none\", ...(child.props.style || {}), ...childStyle },\n        onClick: e => {\n          child.props && child.props.onClick && child.props.onClick(e);\n          if (spec.focusOnSelect) {\n            spec.focusOnSelect(childOnClickOptions);\n          }\n        }\n      })\n    );\n\n    // if slide needs to be precloned or postcloned\n    if (\n      spec.infinite &&\n      childrenCount > 1 &&\n      spec.fade === false &&\n      !spec.unslick\n    ) {\n      let preCloneNo = childrenCount - index;\n      if (preCloneNo <= getPreClones(spec)) {\n        key = -preCloneNo;\n        if (key >= startIndex) {\n          child = elem;\n        }\n        slideClasses = getSlideClasses({ ...spec, index: key });\n        preCloneSlides.push(\n          React.cloneElement(child, {\n            key: \"precloned\" + getKey(child, key),\n            \"data-index\": key,\n            tabIndex: \"-1\",\n            className: classnames(slideClasses, slideClass),\n            \"aria-hidden\": !slideClasses[\"slick-active\"],\n            style: { ...(child.props.style || {}), ...childStyle },\n            onClick: e => {\n              child.props && child.props.onClick && child.props.onClick(e);\n              if (spec.focusOnSelect) {\n                spec.focusOnSelect(childOnClickOptions);\n              }\n            }\n          })\n        );\n      }\n      if (index < getPostClones(spec)) {\n        key = childrenCount + index;\n        if (key < endIndex) {\n          child = elem;\n        }\n        slideClasses = getSlideClasses({ ...spec, index: key });\n        postCloneSlides.push(\n          React.cloneElement(child, {\n            key: \"postcloned\" + getKey(child, key),\n            \"data-index\": key,\n            tabIndex: \"-1\",\n            className: classnames(slideClasses, slideClass),\n            \"aria-hidden\": !slideClasses[\"slick-active\"],\n            style: { ...(child.props.style || {}), ...childStyle },\n            onClick: e => {\n              child.props && child.props.onClick && child.props.onClick(e);\n              if (spec.focusOnSelect) {\n                spec.focusOnSelect(childOnClickOptions);\n              }\n            }\n          })\n        );\n      }\n    }\n  });\n\n  if (spec.rtl) {\n    return preCloneSlides.concat(slides, postCloneSlides).reverse();\n  } else {\n    return preCloneSlides.concat(slides, postCloneSlides);\n  }\n};\n\nexport class Track extends React.PureComponent {\n  node = null;\n\n  handleRef = ref => {\n    this.node = ref;\n  };\n\n  render() {\n    const slides = renderSlides(this.props);\n    const { onMouseEnter, onMouseOver, onMouseLeave } = this.props;\n    const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };\n    return (\n      <div\n        ref={this.handleRef}\n        className=\"slick-track\"\n        style={this.props.trackStyle}\n        {...mouseEvents}\n      >\n        {slides}\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "src/utils/innerSliderUtils.js",
    "content": "import React from \"react\";\nimport defaultProps from \"../default-props\";\n\nexport function clamp(number, lowerBound, upperBound) {\n  return Math.max(lowerBound, Math.min(number, upperBound));\n}\n\nexport const safePreventDefault = event => {\n  const passiveEvents = [\"onTouchStart\", \"onTouchMove\", \"onWheel\"];\n  if (!passiveEvents.includes(event._reactName)) {\n    event.preventDefault();\n  }\n};\n\nexport const getOnDemandLazySlides = spec => {\n  let onDemandSlides = [];\n  let startIndex = lazyStartIndex(spec);\n  let endIndex = lazyEndIndex(spec);\n  for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {\n    if (spec.lazyLoadedList.indexOf(slideIndex) < 0) {\n      onDemandSlides.push(slideIndex);\n    }\n  }\n  return onDemandSlides;\n};\n\n// return list of slides that need to be present\nexport const getRequiredLazySlides = spec => {\n  let requiredSlides = [];\n  let startIndex = lazyStartIndex(spec);\n  let endIndex = lazyEndIndex(spec);\n  for (let slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {\n    requiredSlides.push(slideIndex);\n  }\n  return requiredSlides;\n};\n\n// startIndex that needs to be present\nexport const lazyStartIndex = spec =>\n  spec.currentSlide - lazySlidesOnLeft(spec);\nexport const lazyEndIndex = spec => spec.currentSlide + lazySlidesOnRight(spec);\nexport const lazySlidesOnLeft = spec =>\n  spec.centerMode\n    ? Math.floor(spec.slidesToShow / 2) +\n      (parseInt(spec.centerPadding) > 0 ? 1 : 0)\n    : 0;\nexport const lazySlidesOnRight = spec =>\n  spec.centerMode\n    ? Math.floor((spec.slidesToShow - 1) / 2) +\n      1 +\n      (parseInt(spec.centerPadding) > 0 ? 1 : 0)\n    : spec.slidesToShow;\n\n// get width of an element\nexport const getWidth = elem => (elem && elem.offsetWidth) || 0;\nexport const getHeight = elem => (elem && elem.offsetHeight) || 0;\nexport const getSwipeDirection = (touchObject, verticalSwiping = false) => {\n  var xDist, yDist, r, swipeAngle;\n  xDist = touchObject.startX - touchObject.curX;\n  yDist = touchObject.startY - touchObject.curY;\n  r = Math.atan2(yDist, xDist);\n  swipeAngle = Math.round((r * 180) / Math.PI);\n  if (swipeAngle < 0) {\n    swipeAngle = 360 - Math.abs(swipeAngle);\n  }\n  if (\n    (swipeAngle <= 45 && swipeAngle >= 0) ||\n    (swipeAngle <= 360 && swipeAngle >= 315)\n  ) {\n    return \"left\";\n  }\n  if (swipeAngle >= 135 && swipeAngle <= 225) {\n    return \"right\";\n  }\n  if (verticalSwiping === true) {\n    if (swipeAngle >= 35 && swipeAngle <= 135) {\n      return \"up\";\n    } else {\n      return \"down\";\n    }\n  }\n\n  return \"vertical\";\n};\n\n// whether or not we can go next\nexport const canGoNext = spec => {\n  let canGo = true;\n  if (!spec.infinite) {\n    if (spec.centerMode && spec.currentSlide >= spec.slideCount - 1) {\n      canGo = false;\n    } else if (\n      spec.slideCount <= spec.slidesToShow ||\n      spec.currentSlide >= spec.slideCount - spec.slidesToShow\n    ) {\n      canGo = false;\n    }\n  }\n  return canGo;\n};\n\n// given an object and a list of keys, return new object with given keys\nexport const extractObject = (spec, keys) => {\n  let newObject = {};\n  keys.forEach(key => (newObject[key] = spec[key]));\n  return newObject;\n};\n\n// get initialized state\nexport const initializedState = spec => {\n  // spec also contains listRef, trackRef\n  let slideCount = React.Children.count(spec.children);\n  const listNode = spec.listRef;\n  let listWidth = Math.ceil(getWidth(listNode));\n  const trackNode = spec.trackRef && spec.trackRef.node;\n  let trackWidth = Math.ceil(getWidth(trackNode));\n  let slideWidth;\n  if (!spec.vertical) {\n    let centerPaddingAdj = spec.centerMode && parseInt(spec.centerPadding) * 2;\n    if (\n      typeof spec.centerPadding === \"string\" &&\n      spec.centerPadding.slice(-1) === \"%\"\n    ) {\n      centerPaddingAdj *= listWidth / 100;\n    }\n    slideWidth = Math.ceil((listWidth - centerPaddingAdj) / spec.slidesToShow);\n  } else {\n    slideWidth = listWidth;\n  }\n  let slideHeight =\n    listNode && getHeight(listNode.querySelector('[data-index=\"0\"]'));\n  let listHeight = slideHeight * spec.slidesToShow;\n  let currentSlide =\n    spec.currentSlide === undefined ? spec.initialSlide : spec.currentSlide;\n  if (spec.rtl && spec.currentSlide === undefined) {\n    currentSlide = slideCount - 1 - spec.initialSlide;\n  }\n  let lazyLoadedList = spec.lazyLoadedList || [];\n  let slidesToLoad = getOnDemandLazySlides({\n    ...spec,\n    currentSlide,\n    lazyLoadedList\n  });\n  lazyLoadedList = lazyLoadedList.concat(slidesToLoad);\n\n  let state = {\n    slideCount,\n    slideWidth,\n    listWidth,\n    trackWidth,\n    currentSlide,\n    slideHeight,\n    listHeight,\n    lazyLoadedList\n  };\n\n  if (spec.autoplaying === null && spec.autoplay) {\n    state[\"autoplaying\"] = \"playing\";\n  }\n\n  return state;\n};\n\nexport const slideHandler = spec => {\n  const {\n    waitForAnimate,\n    animating,\n    fade,\n    infinite,\n    index,\n    slideCount,\n    lazyLoad,\n    currentSlide,\n    centerMode,\n    slidesToScroll,\n    slidesToShow,\n    useCSS\n  } = spec;\n  let { lazyLoadedList } = spec;\n  if (waitForAnimate && animating) return {};\n  let animationSlide = index,\n    finalSlide,\n    animationLeft,\n    finalLeft;\n  let state = {},\n    nextState = {};\n  const targetSlide = infinite ? index : clamp(index, 0, slideCount - 1);\n  if (fade) {\n    if (!infinite && (index < 0 || index >= slideCount)) return {};\n    if (index < 0) {\n      animationSlide = index + slideCount;\n    } else if (index >= slideCount) {\n      animationSlide = index - slideCount;\n    }\n    if (lazyLoad && lazyLoadedList.indexOf(animationSlide) < 0) {\n      lazyLoadedList = lazyLoadedList.concat(animationSlide);\n    }\n    state = {\n      animating: true,\n      currentSlide: animationSlide,\n      lazyLoadedList,\n      targetSlide: animationSlide\n    };\n    nextState = { animating: false, targetSlide: animationSlide };\n  } else {\n    finalSlide = animationSlide;\n    if (animationSlide < 0) {\n      finalSlide = animationSlide + slideCount;\n      if (!infinite) finalSlide = 0;\n      else if (slideCount % slidesToScroll !== 0)\n        finalSlide = slideCount - (slideCount % slidesToScroll);\n    } else if (!canGoNext(spec) && animationSlide > currentSlide) {\n      animationSlide = finalSlide = currentSlide;\n    } else if (centerMode && animationSlide >= slideCount) {\n      animationSlide = infinite ? slideCount : slideCount - 1;\n      finalSlide = infinite ? 0 : slideCount - 1;\n    } else if (animationSlide >= slideCount) {\n      finalSlide = animationSlide - slideCount;\n      if (!infinite) finalSlide = slideCount - slidesToShow;\n      else if (slideCount % slidesToScroll !== 0) finalSlide = 0;\n    }\n\n    if (!infinite && animationSlide + slidesToShow >= slideCount) {\n      finalSlide = slideCount - slidesToShow;\n    }\n\n    animationLeft = getTrackLeft({ ...spec, slideIndex: animationSlide });\n    finalLeft = getTrackLeft({ ...spec, slideIndex: finalSlide });\n    if (!infinite) {\n      if (animationLeft === finalLeft) animationSlide = finalSlide;\n      animationLeft = finalLeft;\n    }\n    if (lazyLoad) {\n      lazyLoadedList = lazyLoadedList.concat(\n        getOnDemandLazySlides({ ...spec, currentSlide: animationSlide })\n      );\n    }\n    if (!useCSS) {\n      state = {\n        currentSlide: finalSlide,\n        trackStyle: getTrackCSS({ ...spec, left: finalLeft }),\n        lazyLoadedList,\n        targetSlide\n      };\n    } else {\n      state = {\n        animating: true,\n        currentSlide: finalSlide,\n        trackStyle: getTrackAnimateCSS({ ...spec, left: animationLeft }),\n        lazyLoadedList,\n        targetSlide\n      };\n      nextState = {\n        animating: false,\n        currentSlide: finalSlide,\n        trackStyle: getTrackCSS({ ...spec, left: finalLeft }),\n        swipeLeft: null,\n        targetSlide\n      };\n    }\n  }\n  return { state, nextState };\n};\n\nexport const changeSlide = (spec, options) => {\n  var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;\n  const {\n    slidesToScroll,\n    slidesToShow,\n    slideCount,\n    currentSlide,\n    targetSlide: previousTargetSlide,\n    lazyLoad,\n    infinite\n  } = spec;\n  unevenOffset = slideCount % slidesToScroll !== 0;\n  indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll;\n  if (options.message === \"previous\") {\n    slideOffset =\n      indexOffset === 0 ? slidesToScroll : slidesToShow - indexOffset;\n    targetSlide = currentSlide - slideOffset;\n    if (lazyLoad && !infinite) {\n      previousInt = currentSlide - slideOffset;\n      targetSlide = previousInt === -1 ? slideCount - 1 : previousInt;\n    }\n    if (!infinite) {\n      targetSlide = previousTargetSlide - slidesToScroll;\n    }\n  } else if (options.message === \"next\") {\n    slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset;\n    targetSlide = currentSlide + slideOffset;\n    if (lazyLoad && !infinite) {\n      targetSlide =\n        ((currentSlide + slidesToScroll) % slideCount) + indexOffset;\n    }\n    if (!infinite) {\n      targetSlide = previousTargetSlide + slidesToScroll;\n    }\n  } else if (options.message === \"dots\") {\n    // Click on dots\n    targetSlide = options.index * options.slidesToScroll;\n  } else if (options.message === \"children\") {\n    // Click on the slides\n    targetSlide = options.index;\n    if (infinite) {\n      let direction = siblingDirection({ ...spec, targetSlide });\n      if (targetSlide > options.currentSlide && direction === \"left\") {\n        targetSlide = targetSlide - slideCount;\n      } else if (targetSlide < options.currentSlide && direction === \"right\") {\n        targetSlide = targetSlide + slideCount;\n      }\n    }\n  } else if (options.message === \"index\") {\n    targetSlide = Number(options.index);\n  }\n  return targetSlide;\n};\nexport const keyHandler = (e, accessibility, rtl) => {\n  if (e.target.tagName.match(\"TEXTAREA|INPUT|SELECT\") || !accessibility)\n    return \"\";\n  if (e.keyCode === 37) return rtl ? \"next\" : \"previous\";\n  if (e.keyCode === 39) return rtl ? \"previous\" : \"next\";\n  return \"\";\n};\n\nexport const swipeStart = (e, swipe, draggable) => {\n  e.target.tagName === \"IMG\" && safePreventDefault(e);\n  if (!swipe || (!draggable && e.type.indexOf(\"mouse\") !== -1)) return \"\";\n  return {\n    dragging: true,\n    touchObject: {\n      startX: e.touches ? e.touches[0].pageX : e.clientX,\n      startY: e.touches ? e.touches[0].pageY : e.clientY,\n      curX: e.touches ? e.touches[0].pageX : e.clientX,\n      curY: e.touches ? e.touches[0].pageY : e.clientY\n    }\n  };\n};\nexport const swipeMove = (e, spec) => {\n  // spec also contains, trackRef and slideIndex\n  const {\n    scrolling,\n    animating,\n    vertical,\n    swipeToSlide,\n    verticalSwiping,\n    rtl,\n    currentSlide,\n    edgeFriction,\n    edgeDragged,\n    onEdge,\n    swiped,\n    swiping,\n    slideCount,\n    slidesToScroll,\n    infinite,\n    touchObject,\n    swipeEvent,\n    listHeight,\n    listWidth\n  } = spec;\n  if (scrolling) return;\n  if (animating) return safePreventDefault(e);\n  if (vertical && swipeToSlide && verticalSwiping) safePreventDefault(e);\n  let swipeLeft,\n    state = {};\n  let curLeft = getTrackLeft(spec);\n  touchObject.curX = e.touches ? e.touches[0].pageX : e.clientX;\n  touchObject.curY = e.touches ? e.touches[0].pageY : e.clientY;\n  touchObject.swipeLength = Math.round(\n    Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2))\n  );\n  let verticalSwipeLength = Math.round(\n    Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2))\n  );\n  if (!verticalSwiping && !swiping && verticalSwipeLength > 10) {\n    return { scrolling: true };\n  }\n  if (verticalSwiping) touchObject.swipeLength = verticalSwipeLength;\n  let positionOffset =\n    (!rtl ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);\n  if (verticalSwiping)\n    positionOffset = touchObject.curY > touchObject.startY ? 1 : -1;\n\n  let dotCount = Math.ceil(slideCount / slidesToScroll);\n  let swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping);\n  let touchSwipeLength = touchObject.swipeLength;\n  if (!infinite) {\n    if (\n      (currentSlide === 0 &&\n        (swipeDirection === \"right\" || swipeDirection === \"down\")) ||\n      (currentSlide + 1 >= dotCount &&\n        (swipeDirection === \"left\" || swipeDirection === \"up\")) ||\n      (!canGoNext(spec) &&\n        (swipeDirection === \"left\" || swipeDirection === \"up\"))\n    ) {\n      touchSwipeLength = touchObject.swipeLength * edgeFriction;\n      if (edgeDragged === false && onEdge) {\n        onEdge(swipeDirection);\n        state[\"edgeDragged\"] = true;\n      }\n    }\n  }\n  if (!swiped && swipeEvent) {\n    swipeEvent(swipeDirection);\n    state[\"swiped\"] = true;\n  }\n  if (!vertical) {\n    if (!rtl) {\n      swipeLeft = curLeft + touchSwipeLength * positionOffset;\n    } else {\n      swipeLeft = curLeft - touchSwipeLength * positionOffset;\n    }\n  } else {\n    swipeLeft =\n      curLeft + touchSwipeLength * (listHeight / listWidth) * positionOffset;\n  }\n  if (verticalSwiping) {\n    swipeLeft = curLeft + touchSwipeLength * positionOffset;\n  }\n  state = {\n    ...state,\n    touchObject,\n    swipeLeft,\n    trackStyle: getTrackCSS({ ...spec, left: swipeLeft })\n  };\n  if (\n    Math.abs(touchObject.curX - touchObject.startX) <\n    Math.abs(touchObject.curY - touchObject.startY) * 0.8\n  ) {\n    return state;\n  }\n  if (touchObject.swipeLength > 10) {\n    state[\"swiping\"] = true;\n    safePreventDefault(e);\n  }\n  return state;\n};\nexport const swipeEnd = (e, spec) => {\n  const {\n    dragging,\n    swipe,\n    touchObject,\n    listWidth,\n    touchThreshold,\n    verticalSwiping,\n    listHeight,\n    swipeToSlide,\n    scrolling,\n    onSwipe,\n    targetSlide,\n    currentSlide,\n    infinite\n  } = spec;\n  if (!dragging) {\n    if (swipe) safePreventDefault(e);\n    return {};\n  }\n  let minSwipe = verticalSwiping\n    ? listHeight / touchThreshold\n    : listWidth / touchThreshold;\n  let swipeDirection = getSwipeDirection(touchObject, verticalSwiping);\n  // reset the state of touch related state variables.\n  let state = {\n    dragging: false,\n    edgeDragged: false,\n    scrolling: false,\n    swiping: false,\n    swiped: false,\n    swipeLeft: null,\n    touchObject: {}\n  };\n  if (scrolling) {\n    return state;\n  }\n  if (!touchObject.swipeLength) {\n    return state;\n  }\n  if (touchObject.swipeLength > minSwipe) {\n    safePreventDefault(e);\n    if (onSwipe) {\n      onSwipe(swipeDirection);\n    }\n    let slideCount, newSlide;\n    let activeSlide = infinite ? currentSlide : targetSlide;\n    switch (swipeDirection) {\n      case \"left\":\n      case \"up\":\n        newSlide = activeSlide + getSlideCount(spec);\n        slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide;\n        state[\"currentDirection\"] = 0;\n        break;\n      case \"right\":\n      case \"down\":\n        newSlide = activeSlide - getSlideCount(spec);\n        slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide;\n        state[\"currentDirection\"] = 1;\n        break;\n      default:\n        slideCount = activeSlide;\n    }\n    state[\"triggerSlideHandler\"] = slideCount;\n  } else {\n    // Adjust the track back to it's original position.\n    let currentLeft = getTrackLeft(spec);\n    state[\"trackStyle\"] = getTrackAnimateCSS({ ...spec, left: currentLeft });\n  }\n  return state;\n};\nexport const getNavigableIndexes = spec => {\n  let max = spec.infinite ? spec.slideCount * 2 : spec.slideCount;\n  let breakpoint = spec.infinite ? spec.slidesToShow * -1 : 0;\n  let counter = spec.infinite ? spec.slidesToShow * -1 : 0;\n  let indexes = [];\n  while (breakpoint < max) {\n    indexes.push(breakpoint);\n    breakpoint = counter + spec.slidesToScroll;\n    counter += Math.min(spec.slidesToScroll, spec.slidesToShow);\n  }\n  return indexes;\n};\nexport const checkNavigable = (spec, index) => {\n  const navigables = getNavigableIndexes(spec);\n  let prevNavigable = 0;\n  if (index > navigables[navigables.length - 1]) {\n    index = navigables[navigables.length - 1];\n  } else {\n    for (let n in navigables) {\n      if (index < navigables[n]) {\n        index = prevNavigable;\n        break;\n      }\n      prevNavigable = navigables[n];\n    }\n  }\n  return index;\n};\nexport const getSlideCount = spec => {\n  const centerOffset = spec.centerMode\n    ? spec.slideWidth * Math.floor(spec.slidesToShow / 2)\n    : 0;\n  if (spec.swipeToSlide) {\n    let swipedSlide;\n    const slickList = spec.listRef;\n    const slides =\n      (slickList.querySelectorAll &&\n        slickList.querySelectorAll(\".slick-slide\")) ||\n      [];\n    Array.from(slides).every(slide => {\n      if (!spec.vertical) {\n        if (\n          slide.offsetLeft - centerOffset + getWidth(slide) / 2 >\n          spec.swipeLeft * -1\n        ) {\n          swipedSlide = slide;\n          return false;\n        }\n      } else {\n        if (slide.offsetTop + getHeight(slide) / 2 > spec.swipeLeft * -1) {\n          swipedSlide = slide;\n          return false;\n        }\n      }\n\n      return true;\n    });\n\n    if (!swipedSlide) {\n      return 0;\n    }\n    const currentIndex =\n      spec.rtl === true\n        ? spec.slideCount - spec.currentSlide\n        : spec.currentSlide;\n    const slidesTraversed =\n      Math.abs(swipedSlide.dataset.index - currentIndex) || 1;\n    return slidesTraversed;\n  } else {\n    return spec.slidesToScroll;\n  }\n};\n\nexport const checkSpecKeys = (spec, keysArray) =>\n  keysArray.reduce((value, key) => value && spec.hasOwnProperty(key), true)\n    ? null\n    : console.error(\"Keys Missing:\", spec);\n\nexport const getTrackCSS = spec => {\n  checkSpecKeys(spec, [\n    \"left\",\n    \"variableWidth\",\n    \"slideCount\",\n    \"slidesToShow\",\n    \"slideWidth\"\n  ]);\n  let trackWidth, trackHeight;\n  if (!spec.vertical) {\n    trackWidth = getTotalSlides(spec) * spec.slideWidth;\n  } else {\n    const trackChildren = spec.unslick\n      ? spec.slideCount\n      : spec.slideCount + 2 * spec.slidesToShow;\n    trackHeight = trackChildren * spec.slideHeight;\n  }\n  let style = {\n    opacity: 1,\n    transition: \"\",\n    WebkitTransition: \"\"\n  };\n  if (spec.useTransform) {\n    let WebkitTransform = !spec.vertical\n      ? \"translate3d(\" + spec.left + \"px, 0px, 0px)\"\n      : \"translate3d(0px, \" + spec.left + \"px, 0px)\";\n    let transform = !spec.vertical\n      ? \"translate3d(\" + spec.left + \"px, 0px, 0px)\"\n      : \"translate3d(0px, \" + spec.left + \"px, 0px)\";\n    let msTransform = !spec.vertical\n      ? \"translateX(\" + spec.left + \"px)\"\n      : \"translateY(\" + spec.left + \"px)\";\n    style = {\n      ...style,\n      WebkitTransform,\n      transform,\n      msTransform\n    };\n  } else {\n    if (spec.vertical) {\n      style[\"top\"] = spec.left;\n    } else {\n      style[\"left\"] = spec.left;\n    }\n  }\n  if (spec.fade) style = { opacity: 1 };\n  if (trackWidth) style.width = trackWidth;\n  if (trackHeight) style.height = trackHeight;\n\n  // Fallback for IE8\n  if (window && !window.addEventListener && window.attachEvent) {\n    if (!spec.vertical) {\n      style.marginLeft = spec.left + \"px\";\n    } else {\n      style.marginTop = spec.left + \"px\";\n    }\n  }\n\n  return style;\n};\nexport const getTrackAnimateCSS = spec => {\n  checkSpecKeys(spec, [\n    \"left\",\n    \"variableWidth\",\n    \"slideCount\",\n    \"slidesToShow\",\n    \"slideWidth\",\n    \"speed\",\n    \"cssEase\"\n  ]);\n  let style = getTrackCSS(spec);\n  // useCSS is true by default so it can be undefined\n  if (spec.useTransform) {\n    style.WebkitTransition =\n      \"-webkit-transform \" + spec.speed + \"ms \" + spec.cssEase;\n    style.transition = \"transform \" + spec.speed + \"ms \" + spec.cssEase;\n  } else {\n    if (spec.vertical) {\n      style.transition = \"top \" + spec.speed + \"ms \" + spec.cssEase;\n    } else {\n      style.transition = \"left \" + spec.speed + \"ms \" + spec.cssEase;\n    }\n  }\n  return style;\n};\nexport const getTrackLeft = spec => {\n  if (spec.unslick) {\n    return 0;\n  }\n\n  checkSpecKeys(spec, [\n    \"slideIndex\",\n    \"trackRef\",\n    \"infinite\",\n    \"centerMode\",\n    \"slideCount\",\n    \"slidesToShow\",\n    \"slidesToScroll\",\n    \"slideWidth\",\n    \"listWidth\",\n    \"variableWidth\",\n    \"slideHeight\"\n  ]);\n\n  const {\n    slideIndex,\n    trackRef,\n    infinite,\n    centerMode,\n    slideCount,\n    slidesToShow,\n    slidesToScroll,\n    slideWidth,\n    listWidth,\n    variableWidth,\n    slideHeight,\n    fade,\n    vertical\n  } = spec;\n\n  var slideOffset = 0;\n  var targetLeft;\n  var targetSlide;\n  var verticalOffset = 0;\n\n  if (fade || spec.slideCount === 1) {\n    return 0;\n  }\n\n  let slidesToOffset = 0;\n  if (infinite) {\n    slidesToOffset = -getPreClones(spec); // bring active slide to the beginning of visual area\n    // if next scroll doesn't have enough children, just reach till the end of original slides instead of shifting slidesToScroll children\n    if (\n      slideCount % slidesToScroll !== 0 &&\n      slideIndex + slidesToScroll > slideCount\n    ) {\n      slidesToOffset = -(slideIndex > slideCount\n        ? slidesToShow - (slideIndex - slideCount)\n        : slideCount % slidesToScroll);\n    }\n    // shift current slide to center of the frame\n    if (centerMode) {\n      slidesToOffset += parseInt(slidesToShow / 2);\n    }\n  } else {\n    if (\n      slideCount % slidesToScroll !== 0 &&\n      slideIndex + slidesToScroll > slideCount\n    ) {\n      slidesToOffset = slidesToShow - (slideCount % slidesToScroll);\n    }\n    if (centerMode) {\n      slidesToOffset = parseInt(slidesToShow / 2);\n    }\n  }\n  slideOffset = slidesToOffset * slideWidth;\n  verticalOffset = slidesToOffset * slideHeight;\n\n  if (!vertical) {\n    targetLeft = slideIndex * slideWidth * -1 + slideOffset;\n  } else {\n    targetLeft = slideIndex * slideHeight * -1 + verticalOffset;\n  }\n\n  if (variableWidth === true) {\n    var targetSlideIndex;\n    const trackElem = trackRef && trackRef.node;\n    targetSlideIndex = slideIndex + getPreClones(spec);\n    targetSlide = trackElem && trackElem.childNodes[targetSlideIndex];\n    targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;\n    if (centerMode === true) {\n      targetSlideIndex = infinite\n        ? slideIndex + getPreClones(spec)\n        : slideIndex;\n      targetSlide = trackElem && trackElem.children[targetSlideIndex];\n      targetLeft = 0;\n      for (let slide = 0; slide < targetSlideIndex; slide++) {\n        targetLeft -=\n          trackElem &&\n          trackElem.children[slide] &&\n          trackElem.children[slide].offsetWidth;\n      }\n      targetLeft -= parseInt(spec.centerPadding);\n      targetLeft += targetSlide && (listWidth - targetSlide.offsetWidth) / 2;\n    }\n  }\n\n  return targetLeft;\n};\n\nexport const getPreClones = spec => {\n  if (spec.unslick || !spec.infinite) {\n    return 0;\n  }\n  if (spec.variableWidth) {\n    return spec.slideCount;\n  }\n  return spec.slidesToShow + (spec.centerMode ? 1 : 0);\n};\n\nexport const getPostClones = spec => {\n  if (spec.unslick || !spec.infinite) {\n    return 0;\n  }\n\n  if (spec.variableWidth) {\n    return spec.slideCount;\n  }\n  return spec.slidesToShow + (spec.centerMode ? 1 : 0);\n};\n\nexport const getTotalSlides = spec =>\n  spec.slideCount === 1\n    ? 1\n    : getPreClones(spec) + spec.slideCount + getPostClones(spec);\nexport const siblingDirection = spec => {\n  if (spec.targetSlide > spec.currentSlide) {\n    if (spec.targetSlide > spec.currentSlide + slidesOnRight(spec)) {\n      return \"left\";\n    }\n    return \"right\";\n  } else {\n    if (spec.targetSlide < spec.currentSlide - slidesOnLeft(spec)) {\n      return \"right\";\n    }\n    return \"left\";\n  }\n};\n\nexport const slidesOnRight = ({\n  slidesToShow,\n  centerMode,\n  rtl,\n  centerPadding\n}) => {\n  // returns no of slides on the right of active slide\n  if (centerMode) {\n    let right = (slidesToShow - 1) / 2 + 1;\n    if (parseInt(centerPadding) > 0) right += 1;\n    if (rtl && slidesToShow % 2 === 0) right += 1;\n    return right;\n  }\n  if (rtl) {\n    return 0;\n  }\n  return slidesToShow - 1;\n};\n\nexport const slidesOnLeft = ({\n  slidesToShow,\n  centerMode,\n  rtl,\n  centerPadding\n}) => {\n  // returns no of slides on the left of active slide\n  if (centerMode) {\n    let left = (slidesToShow - 1) / 2 + 1;\n    if (parseInt(centerPadding) > 0) left += 1;\n    if (!rtl && slidesToShow % 2 === 0) left += 1;\n    return left;\n  }\n  if (rtl) {\n    return slidesToShow - 1;\n  }\n  return 0;\n};\n\nexport const canUseDOM = () =>\n  !!(\n    typeof window !== \"undefined\" &&\n    window.document &&\n    window.document.createElement\n  );\n\nexport const validSettings = Object.keys(defaultProps);\n\nexport function filterSettings(settings) {\n  return validSettings.reduce((acc, settingName) => {\n    if (settings.hasOwnProperty(settingName)) {\n      acc[settingName] = settings[settingName];\n    }\n    return acc;\n  }, {});\n}\n"
  },
  {
    "path": "test-setup.js",
    "content": "import \"@testing-library/jest-dom/extend-expect\";\nimport \"regenerator-runtime/runtime\";\n\n//Fix for \"matchMedia not present, legacy browsers require a polyfill jest\" error\nwindow.matchMedia =\n  window.matchMedia ||\n  function() {\n    return {\n      matches: false,\n      addListener: function() {},\n      removeListener: function() {}\n    };\n  };\n"
  },
  {
    "path": "test-utils.js",
    "content": "import { render, fireEvent, waitFor, screen } from \"@testing-library/react\";\n\nexport function getSlidesCount(container) {\n  return container.getElementsByClassName(\"slick-slide\").length;\n}\n\nexport function getSlides(container) {\n  return container.getElementsByClassName(\"slick-slide\");\n}\n\nexport function getClonesCount(container) {\n  return container.getElementsByClassName(\"slick-cloned\").length;\n}\n\nexport function getActiveSlidesCount(container) {\n  return container.querySelectorAll(\".slick-slide.slick-active\").length;\n}\n\nexport function getCurrentSlide(container) {\n  return container.querySelector(\".slick-current\");\n}\n\nexport function getCurrentSlideContent(container) {\n  const slide = container.querySelector(\".slick-current\");\n  return slide.textContent;\n}\n\nexport function getButtons(container) {\n  return container.querySelectorAll(\".slick-dots button\");\n}\n\nexport function getButtonsListItem(container) {\n  return container.querySelectorAll(\".slick-dots\")[0].children;\n}\nexport function getButtonsLength(container) {\n  return container.querySelectorAll(\".slick-dots\")[0].children.length;\n}\nexport function hasClass(element, classname) {\n  if (element.className != undefined) {\n    return element.classList.contains(classname);\n  }\n  return false;\n}\nexport function getActiveButton(container) {\n  return Array.from(\n    container.querySelectorAll(\".slick-dots .slick-active button\")\n  ).map(e => e.textContent);\n}\n// export function getCurrentSlideIdState(container) {\n//   return parseInt(getCurrentSlide(container).getAttribute(\"data-index\")) + 1;\n// }\n// export function activeSlides(container) {\n//   return container.querySelectorAll(\".slick-slide.slick-active\");\n// }\nexport function getActiveSlide(container) {\n  return container.querySelector(\".slick-slide.slick-active\");\n}\n\nexport function getActiveSlides(container) {\n  return container.querySelectorAll(\".slick-slide.slick-active\");\n}\n\nexport function getActiveSlidesText(container) {\n  const slides = getActiveSlides(container);\n  return Array.from(slides).map(e => e.textContent);\n}\n\nexport function clickNext(container) {\n  fireEvent(\n    container.getElementsByClassName(\"slick-next\")[0],\n    new MouseEvent(\"click\", {\n      bubbles: true,\n      cancelable: true\n    })\n  );\n}\n\nexport function clickPrevious(container) {\n  fireEvent(\n    container.getElementsByClassName(\"slick-prev\")[0],\n    new MouseEvent(\"click\", {\n      bubbles: true,\n      cancelable: true\n    })\n  );\n}\n\nexport function hasDots(container) {\n  return Boolean(container.querySelectorAll(\".slick-dots\")[0]);\n}\n\nexport function hasArrows(container) {\n  return Boolean(\n    container.getElementsByClassName(\"slick-next\")[0] ||\n      container.getElementsByClassName(\"slick-prev\")[0]\n  );\n}\n"
  },
  {
    "path": "webpack.config.dist.js",
    "content": "var webpack = require(\"webpack\");\nvar path = require(\"path\");\n\nmodule.exports = {\n  mode: \"production\",\n\n  entry: \"./src/index\",\n\n  output: {\n    library: \"Slider\",\n    libraryTarget: \"umd\",\n    path: path.join(__dirname, \"dist\")\n  },\n\n  module: {\n    rules: [\n      {\n        test: /\\.js/,\n        exclude: /(node_modules)/,\n        use: {\n          loader: \"babel-loader\"\n        }\n      }\n    ]\n  },\n\n  resolve: {\n    extensions: [\".js\", \".jsx\"]\n  },\n\n  externals: {\n    react: {\n      root: \"React\",\n      commonjs2: \"react\",\n      commonjs: \"react\",\n      amd: \"react\"\n    },\n    \"react-dom\": {\n      root: \"ReactDOM\",\n      commonjs2: \"react-dom\",\n      commonjs: \"react-dom\",\n      amd: \"react-dom\"\n    }\n  },\n\n  node: {\n    Buffer: false\n  },\n\n  devtool: \"source-map\",\n\n  performance: {\n    hints: \"warning\"\n  },\n\n  plugins: []\n};\n"
  },
  {
    "path": "webpack.config.js",
    "content": "var webpack = require(\"webpack\");\nvar path = require(\"path\");\n\nmodule.exports = {\n  mode: \"production\",\n  devtool: \"source-map\",\n  entry: {\n    \"docs.js\": \"./docs/index.js\"\n  },\n  output: {\n    path: path.join(__dirname, \"build\"),\n    filename: \"[name]\"\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.jsx?/,\n        exclude: /(node_modules)/,\n        use: {\n          loader: \"babel-loader\"\n        }\n      },\n      {\n        test: /\\.md$/,\n        loader: \"html!markdown\"\n      }\n    ]\n  },\n  resolve: {\n    extensions: [\".js\", \".jsx\"],\n    alias: {\n      \"react-slick\": path.resolve(__dirname, \"src/index.js\")\n    }\n  },\n  plugins: [new webpack.IgnorePlugin(/vertx/)],\n  devServer: {\n    contentBase: path.join(__dirname, \"./build\"),\n    port: 8080,\n    hot: true\n  }\n};\n"
  }
]