{"id":25047398,"url":"https://github.com/saadqbal/react-stacked-carousel","last_synced_at":"2025-04-14T04:21:43.161Z","repository":{"id":57345226,"uuid":"318540611","full_name":"saadqbal/react-stacked-carousel","owner":"saadqbal","description":"Rotating Carousel with stacked cards","archived":false,"fork":false,"pushed_at":"2022-03-03T11:40:00.000Z","size":6430,"stargazers_count":15,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T18:13:12.477Z","etag":null,"topics":["carousel","react-library","react-stacked-card","reactjs","stacked-cards"],"latest_commit_sha":null,"homepage":"http://asadiqbal.me/react-stacked-carousel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saadqbal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-04T14:27:35.000Z","updated_at":"2024-06-25T22:40:32.000Z","dependencies_parsed_at":"2022-08-26T06:21:15.426Z","dependency_job_id":null,"html_url":"https://github.com/saadqbal/react-stacked-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2Freact-stacked-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2Freact-stacked-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2Freact-stacked-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2Freact-stacked-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saadqbal","download_url":"https://codeload.github.com/saadqbal/react-stacked-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819652,"owners_count":21166516,"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":["carousel","react-library","react-stacked-card","reactjs","stacked-cards"],"created_at":"2025-02-06T07:16:30.635Z","updated_at":"2025-04-14T04:21:43.133Z","avatar_url":"https://github.com/saadqbal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-stacked-carousel\n\n\u003e Rotating Carousel with stacked cards\n\n![react-stacked-carousel](screen.gif)\n\n[![NPM](https://img.shields.io/npm/v/react-stacked-carousel.svg)](https://www.npmjs.com/package/react-stacked-carousel) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n# Install\n\n```bash\nnpm install --save react-stacked-carousel\n```\n\n\n# [Demo](http://asadiqbal.me/react-stacked-carousel/)\n\n\n\n# Usage\n\n\n```jsx\nimport React, {StyleSheet, useState} from 'react'\nimport { StackedCarousel } from 'react-stacked-carousel'\nimport 'react-stacked-carousel/dist/index.css';\nconst App = () =\u003e {\n  const [card, setCard] = useState(null);\n  const onCardChange = (event) =\u003e {\n    console.log(\"Card\", event);\n  }\n  \n  return (\n    \u003cdiv className=\"main\"\u003e\n      \u003cStackedCarousel\n        autoRotate={false}\n        onCardChange={onCardChange}\n        containerClassName={\"container\"}\n        cardClassName=\"card\"\n        leftButton={\u003cbutton\u003e{\"\u003c\"}\u003c/button\u003e}\n        rightButton={\u003cbutton\u003e{\"\u003e\"}\u003c/button\u003e}\n      \u003e\n        \u003cdiv key={'child1'}\u003e\n          \u003ch2\u003e1 Card\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv key={'child2'}\u003e\n          \u003ch2\u003e2 Card\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv key={'child3'}\u003e\n          \u003ch2\u003e3 Card\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv key={'child4'}\u003e\n          \u003ch2\u003e4 Card\u003c/h2\u003e\n        \u003c/div\u003e\n      \u003c/StackedCarousel\u003e\n      \u003c/div\u003e\n  )\n}\nexport default App\n\n```\n\n\n# Props\n|Name| Default | Description |\n|--|--|--|\n| `autoRotate` | true | auto rotate the carousel cards after `rotationInterval` millioseconds are passed |\n|`rotationInterval` | 2000 | Rotate a card after this time passes in **milliseconds**.  |\n|`onCardChange`| null | A callback that returns the current card stack indexes object each time a card changes. The return object has this form: (`{previousIndex: 0, currentIndex: 1, nextIndex: 2}`).|\n|`containerClassName` |  | This class will be applied on the **ul** element |\n|`style` |  | Style will be applied on the **ul** element |\n|`cardClassName` |  | This class will be applied on the **li** element |\n|`leftButton` | `\u003cspan\u003e\u0026lsaquo;\u003c/span\u003e` | **ReactComponent** for **Left** button |\n|`rightButton` | `\u003cspan\u003e\u0026rsaquo;\u003c/span\u003e` | **ReactComponent** for **Right** button |\n\n\n## License\n\nMIT © [saadqbal](https://github.com/saadqbal)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadqbal%2Freact-stacked-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaadqbal%2Freact-stacked-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadqbal%2Freact-stacked-carousel/lists"}