{"id":35455295,"url":"https://github.com/zeroskullx/next-elastic-carousel","last_synced_at":"2026-01-03T06:00:13.378Z","repository":{"id":241139989,"uuid":"803437287","full_name":"zeroskullx/next-elastic-carousel","owner":"zeroskullx","description":"True responsiveness with element resize support and RTL rendering, using resize-observer for precise element sizing and accurate animations.","archived":false,"fork":false,"pushed_at":"2025-01-06T18:19:25.000Z","size":1037,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-05T16:40:48.333Z","etag":null,"topics":["carousel","next","nextjs","react","react-carousel","reactjs","resize","responsive","right-to-left","rtl","slides","touch"],"latest_commit_sha":null,"homepage":"","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/zeroskullx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-20T18:12:16.000Z","updated_at":"2024-10-10T22:15:10.000Z","dependencies_parsed_at":"2024-12-06T06:34:31.944Z","dependency_job_id":null,"html_url":"https://github.com/zeroskullx/next-elastic-carousel","commit_stats":null,"previous_names":["zeroskullx/next-elastic-carousel"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/zeroskullx/next-elastic-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeroskullx%2Fnext-elastic-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeroskullx%2Fnext-elastic-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeroskullx%2Fnext-elastic-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeroskullx%2Fnext-elastic-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeroskullx","download_url":"https://codeload.github.com/zeroskullx/next-elastic-carousel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeroskullx%2Fnext-elastic-carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28184456,"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","status":"online","status_checked_at":"2026-01-03T02:00:06.471Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","next","nextjs","react","react-carousel","reactjs","resize","responsive","right-to-left","rtl","slides","touch"],"created_at":"2026-01-03T06:00:02.090Z","updated_at":"2026-01-03T06:00:13.368Z","avatar_url":"https://github.com/zeroskullx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Elastic Carousel\n\nNext Elastic Carousel uses the base of [`react-elastic-carousel`](https://sag1v.github.io/react-elastic-carousel/), where we fixed some known bugs, updated libraries, and added new features. Our goal is to provide a more stable and reliable carousel component for React applications.\n\n## Features\n\n- **Improved versioning**: Ensuring consistent and predictable updates.\n- **Bug fixes**: Addressing known issues from the original repository.\n- **New name**: As the name has been changed to Next Elastic Carousel, it is not compatible with the original React Elastic Carousel, as significant changes have been made to the codebase.\n\nFeel free to contribute by opening issues or submitting pull requests!\n\n## Why do we need yet another carousel component\n\n- **Element resize support (true responsiveness)**\n  Most of the carousel components are responsive to the viewport size, but this is not a real responsive support as we can have an element with a `width:500px` on a `1200px` screen, most carousel component will \"think\" we are on a `1200px` mode because they \"watch\" the view-port's size and not the wrapping element's size.\n  This is the reason why `react-eleastic-carousel` is using the [resize-observer](https://developers.google.com/web/updates/2016/10/resizeobserver) which gives us a true responsive support, not matter on what screen size we are.\n\n- **RTL (right-to-left) support**\n  Supporting right-to-left languages requires a full support for right-to-left rendering and animations which is not supported in most of the carousel components out there. also, right-to-left support is [important and should be a standard for most applications](https://www.youtube.com/watch?v=A_3BfONFRUc).\n\n## Install\n\n```bash\nnpm i next-elastic-carousel\n```\n\nor\n\n```bash\nyarn add next-elastic-carousel\n```\n\nor\n\n```bash\npnpm add next-elastic-carousel\n```\n\n`next-elastic-carousel` is using the latest version of [styled-components](https://github.com/styled-components/styled-components) for styling. This means that you might need to install it as well:\n\n```bash\nnpm i styled-components\n```\n\n## Usage\n\nNote: All tests were conducted on the client side using Next.js 14+. If you have evidence that it works with other versions of React or Next.js, feel free to modify this README.\n\n```jsx\n'use client'\n\nimport Carousel from 'next-elastic-carousel'\n\nexport default function PageCarousel() {\n  const items = [\n    { id: 1, title: 'item #1' },\n    { id: 2, title: 'item #2' },\n    { id: 3, title: 'item #3' },\n    { id: 4, title: 'item #4' },\n    { id: 5, title: 'item #5' },\n  ]\n\n  return (\n    \u003cCarousel\u003e\n      {items.map((item) =\u003e (\n        \u003cdiv key={item.id}\u003e{item.title}\u003c/div\u003e\n      ))}\n    \u003c/Carousel\u003e\n  )\n}\n```\n\n# credit\n\nAll credit goes to [Sagiv Ben Giat](https://github.com/sag1v) and the contributors of [react-elastic-carousel](https://github.com/sag1v/react-elastic-carousel).\n\n## License\n\nMIT © [zeroskullx](https://github.com/zeroskullx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeroskullx%2Fnext-elastic-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeroskullx%2Fnext-elastic-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeroskullx%2Fnext-elastic-carousel/lists"}