{"_id":"@alvaropinot/nuka-carousel","_rev":"5-19ccb6aa1f084b18756a08c3cf4b1893","name":"@alvaropinot/nuka-carousel","time":{"modified":"2022-06-12T14:36:07.940Z","created":"2017-06-08T08:25:41.003Z","2.0.4":"2017-06-08T08:25:41.003Z","2.2.0":"2017-06-08T08:42:28.564Z"},"maintainers":[{"email":"alvaro@neatnait.com","name":"alvaropinot"}],"dist-tags":{"beta":"2.2.0","latest":"2.2.0"},"versions":{"2.2.0":{"name":"@alvaropinot/nuka-carousel","version":"2.2.0","description":"Pure React Carousel","main":"index.js","dependencies":{"exenv":"^1.2.0","object-assign":"^4.1.0","kw-react-tween-state":"^0.1.5"},"devDependencies":{"babel-core":"^5.8.25","babel-eslint":"^4.1.3","babel-loader":"^5.3.2","chai":"^3.3.0","css-loader":"^0.19.0","del":"^2.0.2","eslint":"^1.6.0","eslint-loader":"^1.0.0","eslint-plugin-react":"^3.5.1","gulp":"^3.9.0","gulp-babel":"^5.2.1","gulp-eslint":"^1.0.0","gulp-karma":"0.0.5","gulp-open":"^1.0.0","gulp-util":"^3.0.6","gulp-webpack":"^1.5.0","istanbul":"^0.3.22","istanbul-instrumenter-loader":"^0.1.3","karma":"^0.13.10","karma-chrome-launcher":"^0.2.1","karma-coverage":"^0.5.2","karma-firefox-launcher":"^0.1.6","karma-mocha":"^0.2.0","karma-mocha-reporter":"^1.1.1","karma-phantomjs-launcher":"^1.0.2","karma-script-launcher":"~0.1.0","karma-sinon-chai":"^1.1.0","karma-webpack":"^1.7.0","mocha":"^2.3.3","phantomjs":"^1.9.18","prop-types":"^15.5.8","react":"^15.3.0","react-addons-test-utils":"^15.3.0","react-dom":"^15.3.0","react-hot-loader":"^1.3.0","sinon":"^1.17.1","sinon-chai":"^2.8.0","style-loader":"^0.12.4","url-loader":"^0.5.6","webpack":"^1.12.2","webpack-dev-server":"^1.12.0"},"peerDependencies":{"prop-types":"^15.5.8","react":"^0.14.9 || ^15.3.0","react-dom":"^0.14.9 || ^15.3.0"},"scripts":{"prepare":"npm run build","build":"gulp build","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/kenwheeler/nuka-carousel.git"},"keywords":["react","carousel","nuka"],"author":{"name":"Ken Wheeler"},"license":"MIT","bugs":{"url":"https://github.com/kenwheeler/nuka-carousel/issues"},"homepage":"https://github.com/kenwheeler/nuka-carousel","gitHead":"bfbe3b1212eb23d0365a5b860ae1b90a57a902b3","_id":"@alvaropinot/nuka-carousel@2.2.0","_shasum":"6a18fcc47368202690062114078279701ab4e91e","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.2","_npmUser":{"name":"alvaropinot","email":"alvaro@neatnait.com"},"dist":{"shasum":"6a18fcc47368202690062114078279701ab4e91e","tarball":"https://registry.npmjs.org/@alvaropinot/nuka-carousel/-/nuka-carousel-2.2.0.tgz","integrity":"sha512-Cn7BwV4dc5fuSR46HmO/pOPkf5ziNAWepJy7VRX5Yw5xjyvtjl6x/EINvnJXOBth5qJoySS3kEq1qEEJnz64HQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuMZ7XfDxwcvfcnph4P7mhhhhCLTJkC9wJyVb4f9ySWgIhAPsnKB8EyrJSxCvxWCTPsxd8t4+9O9Lp9jLFb/X0JbhH"}]},"maintainers":[{"email":"alvaro@neatnait.com","name":"alvaropinot"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/nuka-carousel-2.2.0.tgz_1496911347525_0.9346566798631102"}}},"readme":"#nuka-carousel\n\nA Pure ReactJS Carousel Component\n\n![http://i.imgur.com/UwP5gle.gif](http://i.imgur.com/UwP5gle.gif)\n\n###Install\n\n```\nnpm install nuka-carousel\n```\n\n###Example\n```javascript\n'use strict';\n\nvar React = require('react');\n\nvar Carousel = require('nuka-carousel');\n\nconst App = React.createClass({\n  mixins: [Carousel.ControllerMixin],\n  render() {\n    return (\n      <Carousel>\n        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\"/>\n        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\"/>\n        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\"/>\n        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\"/>\n        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\"/>\n        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\"/>\n      </Carousel>\n    )\n  }\n});\n\nmodule.exports = App;\n```\n\n###Running demo locally\n\nThe demo can be launched on local machine via `webpack-dev-server`. Run the following:\n\n```javascript\n// if webpack-dev-server is not installed globally\n./node_modules/.bin/webpack-dev-server\n\n```\nNow, you can access the application on  your localhost at following url: <a href=\"http://localhost:8080/demo\" target=\"_blank\">Demo</a>\n\n###Props\n\n####afterSlide\n`React.PropTypes.func`\n\nHook to be called after a slide is changed.\n\n####autoplay\n`React.PropTypes.bool`\n\nAutoplay mode active. Defaults to false.\n\n####autoplayInterval\n`React.PropTypes.number`\n\nInterval for autoplay iteration. Defaults to 3000.\n\n####beforeSlide\n`React.PropTypes.func`\n\nHook to be called before a slide is changed.\n\n####cellAlign\n`React.PropTypes.oneOf(['left', 'center', 'right'])`\n\nWhen displaying more than one slide, sets which position to anchor the current slide to.\n\n####cellSpacing\n`React.PropTypes.number`\n\nSpace between slides, as an integer, but reflected as `px`\n\n####data\n`React.PropTypes.func`\n\nUsed with the ControllerMixin to add carousel data to parent state.\n\n####decorators\n`React.PropTypes.array`\n\nAn array of objects that supply internal carousel controls.\nDecorator objects have `component`, `position` & `style` properties. `component` takes a React component, `position` takes a predefined position string and `style` takes an object of styles to be applied to the decorator. See an example below:\n\n```javascript\nvar Decorators = [{\n  component: React.createClass({\n    render() {\n      return (\n        <button\n          onClick={this.props.previousSlide}>\n          Previous Slide\n        </button>\n      )\n    }\n  }),\n  position: 'CenterLeft',\n  style: {\n    padding: 20\n  }\n}];\n\n// Valid position properties are TopLeft, TopCenter, TopRight\n// CenterLeft, CenterCenter, CenterRight, BottomLeft, BottomCenter\n// and BottomRight\n```\n\n####dragging\n`React.PropTypes.bool`\n\nEnable mouse swipe/dragging\n\n####easing\n`React.PropTypes.string`\n\nAnimation easing function. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)\n\n####framePadding\n`React.PropTypes.string`\n\nUsed to set the margin of the slider frame. Accepts any string dimension value such as `\"0px 20px\"` or `\"500px\"`.\n\n####frameOverflow\n`React.PropTypes.string`\n\nUsed to set overflow style property on slider frame. Defaults to `hidden`.\n\n####edgeEasing\n`React.PropTypes.string`\n\nAnimation easing function when swipe exceeds edge. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)\n\n####initialSlideHeight\n`React.PropTypes.number`\n\nInitial height of the slides in pixels.\n\n####initialSlideWidth\n`React.PropTypes.number`\n\nInitial width of the slides in pixels.\n\n####slideIndex\n`React.PropTypes.number`\n\nManually set the index of the slide to be shown.\n\n####slidesToShow\n`React.PropTypes.number`\n\nSlides to show at once.\n\n####slidesToScroll\n```\nslidesToScroll: React.PropTypes.oneOfType([\n  React.PropTypes.number,\n  React.PropTypes.oneOf(['auto'])\n])\n```\n\nSlides to scroll at once. Set to `\"auto\"` to always scroll the current number of visible slides.\n\n####slideWidth\n\n`React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])`\n\nManually set slideWidth. If you want hard pixel widths, use a string like `slideWidth=\"20px\"`, and if you prefer a percentage of the container, use a decimal integer like `slideWidth={0.8}`\n\n####speed\n`React.PropTypes.number`\n\nAnimation duration.\n\n####swiping\n`React.PropTypes.bool`\n\nEnable touch swipe/dragging\n\n####vertical\n`React.PropTypes.bool`\n\nEnable the slides to transition vertically.\n\n####width\n`React.PropTypes.string`\n\nUsed to hardcode the slider width. Accepts any string dimension value such as `\"80%\"` or `\"500px\"`.\n\n####wrapAround\n`React.PropTypes.bool`\n\nSets infinite wrapAround mode. Defaults to `false`\n\n###ControllerMixin\n\nThe ControllerMixin provides a way to add external controllers for a carousel. To use the controller mixin, add it to your parent component as shown below:\n\n```javascript\nconst App = React.createClass({\n  mixins: [Carousel.ControllerMixin],\n  render() {\n    return (\n      <Carousel ref=\"carousel\" data={this.setCarouselData.bind(this, 'carousel')}>\n        ...\n      </Carousel>\n    )\n  }\n});\n```\n\nIt is required to give your component a ref value, and to pass the setCarouselData method to the data prop with the same ref as an argument.\n\nAfter setting this up, your parent component has a carousels object in it's state. You can now control your carousels from other child components:\n\n```javascript\nconst App = React.createClass({\n  mixins: [Carousel.ControllerMixin],\n  render() {\n    return (\n      <Carousel ref=\"carousel\" data={this.setCarouselData.bind(this, 'carousel')}>\n        ...\n      </Carousel>\n      {this.state.carousels.carousel ? <button type=\"button\" onClick={this.state.carousels.carousel.goToSlide.bind(null,4)}>\n        Go to slide 5\n      </button> : null}\n    )\n  }\n});\n\n```\n\n### Contributing\n\nSee the [Contribution Docs](CONTRIBUTING.md).\n","readmeFilename":"README.md","description":"Pure React Carousel","homepage":"https://github.com/kenwheeler/nuka-carousel","keywords":["react","carousel","nuka"],"repository":{"type":"git","url":"git+https://github.com/kenwheeler/nuka-carousel.git"},"author":{"name":"Ken Wheeler"},"bugs":{"url":"https://github.com/kenwheeler/nuka-carousel/issues"},"license":"MIT"}