{"id":15987901,"url":"https://github.com/andraxdev/material-carousel-react","last_synced_at":"2025-06-22T17:05:59.449Z","repository":{"id":256479716,"uuid":"855428817","full_name":"AndraxDev/material-carousel-react","owner":"AndraxDev","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-14T16:55:56.000Z","size":5609,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T16:54:20.671Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndraxDev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-10T21:14:22.000Z","updated_at":"2024-09-14T16:56:00.000Z","dependencies_parsed_at":"2024-09-15T02:29:06.922Z","dependency_job_id":null,"html_url":"https://github.com/AndraxDev/material-carousel-react","commit_stats":null,"previous_names":["andraxdev/material-carousel-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndraxDev%2Fmaterial-carousel-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndraxDev%2Fmaterial-carousel-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndraxDev%2Fmaterial-carousel-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndraxDev%2Fmaterial-carousel-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndraxDev","download_url":"https://codeload.github.com/AndraxDev/material-carousel-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243172111,"owners_count":20247884,"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-10-08T03:42:41.712Z","updated_at":"2025-03-12T06:41:41.326Z","avatar_url":"https://github.com/AndraxDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material Carousel\n\nThis is the example of Material 3 Carousel using ReactJS.\n\n![Screenshot.png](Screenshot.png)\n\n## Demo\n\nView demo at [https://carousel.andrax.dev/](https://carousel.andrax.dev/)\n\n## Requirements\n\n```bash\nnpm install react-device-detect@2.2.3\n```\n\n\u003e [!NOTE]\n\u003e \n\u003e However, you can use this component without `react-device-detect` package, but scrolling on mobile devices will not work without it.\n\n## Usage\n\n```js\n\u003cCarousel urls={urls} supportSnap={false}/\u003e\n```\n\nWhere `urls` is an array of image URLs and `supportSnap` is a boolean value that enables snapping to the closest item.\n\n## How it was created\n\nWidth of all elements is calculated dynamically based on the scroll width using the following formula:\n\n\u003cdiv style=\"text-align:center\"\u003e\u003cimg src=\"RenderFormulaNew.png\" /\u003e\u003c/div\u003e\n\nWhere x is scroll width + item offset. Each new item has offset of 110px. Scroll width is a virtual parameter as carousel elements only changes their width to simulate scrolling effect.\n\n## License\n\n```\nCopyright (c) 2024 Dmytro Ostapenko. All rights reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n  http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandraxdev%2Fmaterial-carousel-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandraxdev%2Fmaterial-carousel-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandraxdev%2Fmaterial-carousel-react/lists"}