{"id":25707717,"url":"https://github.com/jhsware/inferno-carousel-pure","last_synced_at":"2026-06-12T06:05:20.567Z","repository":{"id":34164870,"uuid":"170930769","full_name":"jhsware/inferno-carousel-pure","owner":"jhsware","description":"Inferno native carousel component, forked from nuka-carousel","archived":false,"fork":false,"pushed_at":"2022-12-10T02:56:51.000Z","size":1951,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T21:20:59.866Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhsware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-15T21:30:35.000Z","updated_at":"2020-10-06T12:22:41.000Z","dependencies_parsed_at":"2023-01-15T05:15:27.176Z","dependency_job_id":null,"html_url":"https://github.com/jhsware/inferno-carousel-pure","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-carousel-pure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-carousel-pure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-carousel-pure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-carousel-pure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhsware","download_url":"https://codeload.github.com/jhsware/inferno-carousel-pure/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240634538,"owners_count":19832887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-25T08:38:48.109Z","updated_at":"2026-06-12T06:05:15.538Z","avatar_url":"https://github.com/jhsware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nuka-carousel\n\nA Pure ReactJS Carousel Component\n\nMaintained by [Sarah Meyer](https://github.com/sarmeyer)\n\n![Nuka Carousel Animated Example](https://i.imgur.com/UwP5gle.gif)\n\n### Install\n\nTo add `nuka-carousel` to your project run the following command in your project folder.\n\n```bash\n$ yarn add nuka-carousel\n```\n\n### Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'nuka-carousel';\n\nexport default class extends React.Component {\n  render() {\n    return (\n      \u003cCarousel\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide1\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide2\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide3\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide4\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide5\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide6\" /\u003e\n      \u003c/Carousel\u003e\n    );\n  }\n}\n```\n\n### Running demo locally\n\nThe demo can be launched on your local machine via `webpack-dev-server`. Make sure you are running node version 9.11 or earlier. Once you have cloned this repo locally, run the following:\n\n\n\n```bash\nyarn\nyarn build\nyarn start\n```\n\nYou can access the application on your localhost at the following url: \u003ca href=\"http://localhost:8080/demo\" target=\"_blank\"\u003eLocal Demo\u003c/a\u003e\n\nOr on CodeSandBox at the following url: \u003ca href=\"https://codesandbox.io/s/04wxloyyp\" target=\"_blank\"\u003eCodeSandBox Demo\u003c/a\u003e\n\n### Keyboard Controls\n\n| Key Combination            | Function                                            |\n| -------------------------- | --------------------------------------------------- |\n| Right/Up Arrow or D/W key  | Next slide                                          |\n| Left/Down Arrow or A/S key | Previous slide                                      |\n| Q key                      | First slide                                         |\n| E key                      | Last slide                                          |\n| SpaceBar                   | When `autoplay={true}` pauses and unpauses carousel |\n\n\n- Keyboard shortcuts are disabled as a default. To enable them set `enableKeyboardControls` prop to `true`.\n\n### Props\n\n| Name                       | PropType                                                                                | Description                                                                                                                                                                                                | Default                                                                   |\n| :------------------------- | :-------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ |\n| afterSlide                 | `React.PropTypes.func`                                                                  | Hook to be called after a slide is changed.                                                       |                                                                           |\n| animation                  | `React.PropTypes.oneOf(['zoom'])`                                                       | Adds a zoom effect on the currently visible slide. A `transform: scale(0.85)` is set as default, however, the scale can be customized using `zoomScale` prop. Property is applied on all slides except the current 1. Use `cellAlign` to align the slide with zoom effect where you'd like.                       |                                                                           |\n| autoGenerateStyleTag       | `React.PropTypes.bool`                                                                  | When set to `true`, it will generate a `style` tag to help ensure images are displayed properly. Set to `false` if you don't want or need the style tag generated.                                       | `true`                                                                    |\n| autoplay                   | `React.PropTypes.bool`                                                                  | Autoplay mode active.                                                                                                                                                                                      | `false`                                                                   |\n| autoplayInterval           | `React.PropTypes.number`                                                                | Interval for autoplay iteration.                                                                                                                                                                           | `3000 milliseconds`                                                       |\n| beforeSlide                | `React.PropTypes.func`                                                                  | Hook to be called before a slide is changed                                                                                                                                                                |                                                                           |\n| cellAlign                  | `React.PropTypes.oneOf(['left', 'center', 'right'])`                                    | When displaying more than one slide, sets which position to anchor the current slide to. When `cellAlign='center'` or `cellAlign='right'`, keep `slidesToScroll` prop set to default.**Is overridden to `left` when `transitionMode=\"fade\"`**                                                       |                                                                           |\n| cellSpacing                | `React.PropTypes.number`                                                                | Space between slides, as an integer, but reflected as `px`                                                                                                                                                 |                                                                           |\n| enableKeyboardControls     | `React.PropTypes.bool`                                                                  | When set to `true` will enable keyboard controls.                                                                                                       |                                                  | `false`\n| disableAnimation          | `React.PropTypes.bool`                                                                  | When set to `true`, will disable animation.                                                                                                                                                                    | `false`\n| dragging                   | `React.PropTypes.bool`                                                                  | Enable mouse swipe/dragging.                                                                                                                                                                               | `true`                                                                    |\n| easing                     | `React.PropTypes.string`                                                                | Animation easing function. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease)                                                                                                    |                                                                           |\n| edgeEasing                 | `React.PropTypes.string`                                                                | Animation easing function when swipe exceeds edge. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease)                                                                            |                                                                           |\n| frameOverflow              | `React.PropTypes.string`                                                                | Used to set overflow style property on slider frame.                                                                                                                                                       | `hidden`                                                                  |\n| framePadding               | `React.PropTypes.string`                                                                | Used to set the margin of the slider frame. Accepts any string dimension value such as `\"0px 20px\"` or `\"500px\"`                                                                                           |                                                                           |\n| heightMode                 | `React.PropTypes.oneOf(['first', 'current', 'max'])`                                    | Change the height of the slides based either on the first slide, the current slide, or the maximum height of all slides. Overrides height set by `initialSlideHeight`                                      |                                                                           |\n| initialSlideHeight         | `React.PropTypes.number`                                                                | Initial height of the slides in pixels.                                                                                                                                                                    | `100`                                                                     |\n| initialSlideWidth          | `React.PropTypes.number`                                                                | Initial width of the slides in pixels                                                                                                                                                                      |                                                                           |\n| pauseOnHover               | `React.PropTypes.bool`                                                                  | Pause autoPlay when mouse is over carousel.                                                                                                                                                                | `true`                                                                    |\n| renderAnnounceSlideMessage | `React.PropTypes.func`                                                                  | Renders message in the ARIA live region that is announcing the current slide on slide change                                                                                                               | Render function that returns `\"Slide {currentSlide + 1} of {slideCount}\"` |\n| slideIndex                 | `React.PropTypes.number`                                                                | Manually set the index of the slide to be shown                                                                                                                                                            |                                                                           |\n| slideOffset                | `React.PropTypes.number`                                                                | While using prop `animation = \"zoom\"`, you can configure space around current slide with slideOffset.                                                                                                      | 25                                                                        |\n| slidesToScroll             | `React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.oneOf(['auto'])])` | Slides to scroll at once. Set to `\"auto\"` to always scroll the current number of visible slides. Is overridden to `slidesToShow` when `transitionMode=\"fade\"`                                              |                                                                           |\n| slidesToShow               | `React.PropTypes.number`                                                                | Number of slides to show at once. Will be cast to an `integer` when `transitionMode=\"fade\"`                                                                                                                |                                                                           |\n| slideWidth                 | `React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])`           | Manually 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| speed                      | `React.PropTypes.number`                                                                | Animation duration/Transition speed in milliseconds                                                                                                                                                        |                                                                           |\n| swiping                    | `React.PropTypes.bool`                                                                  | Enable touch swipe/dragging                                                                                                                                                                                |                                                                           |\n| transitionMode             | `React.PropTypes.oneOf(['scroll', 'fade'])`                                             | Set the way slides transition from one to the next.                                                                                                                                                        | `scroll`                                                                  |\n| vertical                   | `React.PropTypes.bool`                                                                  | Enable the slides to transition vertically                                                                                                                                                                 |                                                                           |\n| width                      | `React.PropTypes.string`                                                                | Used to hardcode the slider width. Accepts any string dimension value such as `\"80%\"` or `\"500px\"`                                                                                                         |                                                                           |\n| withoutControls            | `React.PropTypes.bool`                                                                  | Used to remove all controls at once. Overwrites the `render[Top, Right, Bottom, Left]CenterControls()`.                                                                                                    | `false`                                                                   |\n| wrapAround                 | `React.PropTypes.bool`                                                                  | Sets infinite wrapAround mode.                                                                                                                                                                             | `false`                                                                   |\n| zoomScale                 | `React.PropTypes.number`                                                                 | Adds a number value to set the scale of zoom when `animation === \"zoom\"`. The number value should be set in a range of (0,1). The default value is set to `zoomScale: 0.85`                               |\n\n\n#### render\\*Controls\n\n`React.PropTypes.func`\n\nA set of eight render props for rendering controls in different positions around the carousel.\n\n- Valid render props for the eight positions are `renderTopLeftControls`, `renderTopCenterControls`, `renderTopRightControls`, `renderCenterLeftControls`, `renderCenterCenterControls`, `renderCenterRightControls`, `renderBottomLeftControls`, `renderBottomCenterControls`, and `renderBottomRightControls`.\n\n- The default props are set as `renderCenterLeftControls` for `Previous` button, `renderCenterRightControls` for the `Next` button and `renderBottomCenterControls` for the \"Paging dots\". To change the position or remove \"Paging dots\", the default positions need to be disabled by setting them to null.\n\n```jsx\n\u003cCarousel\n  renderTopCenterControls={({ currentSlide }) =\u003e (\n    \u003cdiv\u003eSlide: {currentSlide}\u003c/div\u003e\n  )}\n  renderCenterLeftControls={({ previousSlide }) =\u003e (\n    \u003cbutton onClick={previousSlide}\u003ePrevious\u003c/button\u003e\n  )}\n  renderCenterRightControls={({ nextSlide }) =\u003e (\n    \u003cbutton onClick={nextSlide}\u003eNext\u003c/button\u003e\n  )}\n\u003e\n  {/* Carousel Content */}\n\u003c/Carousel\u003e\n```\n\n- The function returns the props for `goToSlide`, `nextSlide` and `previousSlide` functions in addition to `slideCount` and `currentSlide` values. Can also remove all render controls using `withoutControls`.\n\n- NOTE: The className `slide-visible` is added to the currently visible slide.\n\n#### renderAnnounceSlideMessage\n\n`React.PropTypes.func`\n\n`renderAnnounceSlideMessage` render prop is a special case of the `render*Controls` props. It's responsibility is to render ARIA live announcement message to improve accessibility. The prop will announce the message you pass in every time the slide changes with `VoiceOver` enabled on your machine. The function returns only `slideCount` and `currentSlide` values.\n\n```jsx\n\u003cCarousel\n  renderAnnounceSlideMessage={({ currentSlide, slideCount }) =\u003e\n    `Slide ${currentSlide + 1} of ${slideCount}`\n  }\n\u003e\n  {/* Carousel Content */}\n\u003c/Carousel\u003e\n```\n\n### External Control of Carousel State\n\nYou can control the state of the carousel from your parent component as shown below:\n\n```jsx\nimport React from 'react';\nimport Carousel from 'nuka-carousel';\n\nexport default class extends React.Component {\n  state = {\n    slideIndex: 0\n  };\n\n  render() {\n    return (\n      \u003cCarousel\n        slideIndex={this.state.slideIndex}\n        afterSlide={slideIndex =\u003e this.setState({ slideIndex })}\n      \u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide1\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide2\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide3\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide4\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide5\" /\u003e\n        \u003cimg src=\"http://placehold.it/1000x400/ffffff/c0392b/\u0026text=slide6\" /\u003e\n      \u003c/Carousel\u003e\n    );\n  }\n}\n```\n\n### TypeScript\n\nTypeScript type definitions are now shipped with nuka-carousel. You can use them directly from the library.\n\n### Contributing\n\nSee the [Contribution Docs](CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhsware%2Finferno-carousel-pure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhsware%2Finferno-carousel-pure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhsware%2Finferno-carousel-pure/lists"}