{"id":21190115,"url":"https://github.com/reactiumcore/re-carousel","last_synced_at":"2025-03-14T20:44:20.267Z","repository":{"id":34221851,"uuid":"172140871","full_name":"ReactiumCore/re-carousel","owner":"ReactiumCore","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-10T16:25:01.000Z","size":934,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-03T09:03:20.697Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ReactiumCore.png","metadata":{"files":{"readme":"readme.md","changelog":null,"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-22T22:04:54.000Z","updated_at":"2019-02-26T00:55:58.000Z","dependencies_parsed_at":"2022-07-24T18:02:32.009Z","dependency_job_id":null,"html_url":"https://github.com/ReactiumCore/re-carousel","commit_stats":null,"previous_names":["reactiumcore/re-carousel","atomic-reactor/re-carousel"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fre-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fre-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fre-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2Fre-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReactiumCore","download_url":"https://codeload.github.com/ReactiumCore/re-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243646539,"owners_count":20324583,"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":"2024-11-20T18:59:28.973Z","updated_at":"2025-03-14T20:44:20.237Z","avatar_url":"https://github.com/ReactiumCore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"After spending hours trying to find a React carousel that fit my extremely basic needs:\n\n1. No style sheets to force my way into to customize the carousel.\n2. Supply a component or markup to the carousel.\n3. Autosize the size of the slide to the parent container.\n4. Control the carousel with any button or component.\n5. Loop.\n6. Set initial slide index.\n7. Disable tabbing to next slide. This is the most important as I was using a form in each slide and didn't want the carousel to jump to the next slide until the current slide was validated.\n\nI decided to roll yet another carousel because my basic needs couldn't be met by the masses.\n\n\u003e **1.1.0 Update:** Added autoplay and swipe left/right to navigate through slides on mobile. Added autoplay.\n\n## Installation\n\n```\nnpm i --save reactium-carousel\n```\n\n## Usage\n\n```\nimport React from 'react';\nimport { Carousel, Slide } from 'reactium-carousel';\n\n// Your component\nexport default class Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        // Create a reference to the carousel\n        // so we can control it with buttons\n        this.carousel = null;\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cdiv style={{width: 500, height: 500}}\u003e\n                    \u003cCarousel speed={0.25} loop={true} startIndex={0} ref={elm =\u003e (this.carousel = elm)}\u003e\n                        \u003cSlide\u003eSLIDE - 1\u003c/Slide\u003e\n                        \u003cSlide\u003eSLIDE - 2\u003c/Slide\u003e\n                        \u003cSlide\u003eSLIDE - 3\u003c/Slide\u003e\n                    \u003c/Carousel\u003e\n                \u003c/div\u003e\n                \u003cdiv\u003e\n                    \u003cbutton type='button' onClick={() =\u003e this.carousel.prev()}\u003e\n                        back\n                    \u003c/button\u003e\n                    \u003cbutton type='button' onClick={() =\u003e this.carousel.next()}\u003e\n                        next\n                    \u003c/button\u003e\n                    \u003cbutton type='button' onClick={() =\u003e this.carousel.jumpTo(2)}\u003e\n                        Slide - 3\n                    \u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n```\n\n## Carousel Props\n\n##### autoplay\n_Boolean_ : Autoplay the slides and display for a fixed period of time: `duration`.\n\n_Default_ : false\n\n##### duration\n_Number_ : Time in seconds to display a slide when `autoplay` is `true`.\n\n_Default_ : 10\n\n##### loop\n_Boolean_ : Loop back to the first slide when at the end of the slides list.\n\n_Default_ : false\n\n##### pauseOnHover\n_Boolean_ : Pause `autoplay` on mouse hover.\n\n_Default_ : true\n\n##### speed\n_Number_ : Time in seconds of the slide animation.\n\n_Default_ : 0.5\n\n##### startIndex\n_Number_ : Zero based integer that sets the initial slide displayed.\n\n_Default_ : 0\n\n##### style\n_Object_ : Style object applied to the `Carousel.container` DOM element.\n\n##### swipeable\n_Boolean_ : Enable/Disable swipe navigation when in a mobile view.\n\n_Default_ : true\n\n\n## Carousel Public Properties\n\n##### animating\n_Boolean_ : The animation status.\n\n##### container\n_DOMElement_ : The Carousel wrapper `\u003cdiv\u003e` element.\n\n##### index\n_Number_ : The active slide index.\n\n##### paused\n_Boolean_ : The autoplay status.\n\n\n## Carousel Methods\n\n##### next()\nNavigate to the next slide. If loop is `true`, navigate to the first slide.\n\n##### prev()\nNavigate to the prev slide. If loop is `true`, navigate to the last slide.\n\n##### jumpTo(index:Number)\nNavigate to the specified slide index.\n\n##### play()\nStart the autoplay. This will reset the timer back to zero.\n\n##### pause()\nPause the autoplay and sets the `paused` property to: true.\n\n##### resume()\nResume the autoplay and sets the `paused` property to: false.\n\n##### stop()\nStop the autoplay. This will reset the timer back to zero.\n\n\n## Carousel Events\n\n##### onComplete\nTriggered after the animation has completed.\n\n##### onChange\nTriggered after the animation has completed and state update.\n\n##### onNext / onPrev\nTriggered before the next/previous animation.\n\n##### onPlay\nTriggered when `play()` function is called.\n\n##### onPause\nTriggered when the `pause()` function is called.\n\n##### onResume\nTriggered when the `resume()` function is called.\n\n##### onStop\nTriggered when the `stop()` function is called.\n\n\n## Roadmap\n\nThese features we not apart of my initial release because I didn't need them at the time.\n\n1. ~~Autoplay~~. _Added in 1.1.0_\n2. ~~Swipe next/prev~~. _Added in 1.1.0_\n\n\n## Contributing\nThe src is built on [Reactium](http://reactium.io).. learn that $#!+\n\nNo really PRs are more than welcome...\n\nClone the source repo from [here](https://github.com/Atomic-Reactor/re-carousel).\n\nInstall dependencies and run locally:\n\n```\n$ cd /Your/Copy/of/repo\n$ npm install \u0026\u0026 npm run local\n```\n\nNavigate to the `~/src/app/components/ReCarousel` directory.\n\n**Profit.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactiumcore%2Fre-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactiumcore%2Fre-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactiumcore%2Fre-carousel/lists"}