{"id":25269958,"url":"https://github.com/xiaxiangfeng/react-carousel3d","last_synced_at":"2025-10-27T07:32:07.498Z","repository":{"id":61454430,"uuid":"549516644","full_name":"xiaxiangfeng/react-carousel3d","owner":"xiaxiangfeng","description":"A 3D perspective carousel 3D效果的走马灯","archived":false,"fork":false,"pushed_at":"2023-08-31T09:34:16.000Z","size":4555,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-01T12:09:30.956Z","etag":null,"topics":["carousel","carousel3d","react-carousel","react-carousel3d"],"latest_commit_sha":null,"homepage":"https://xiaxiangfeng.github.io/react-carousel3d/#/carousel","language":"TypeScript","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/xiaxiangfeng.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":"2022-10-11T09:56:09.000Z","updated_at":"2024-11-29T13:05:22.000Z","dependencies_parsed_at":"2024-11-22T00:14:48.906Z","dependency_job_id":null,"html_url":"https://github.com/xiaxiangfeng/react-carousel3d","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.0714285714285714,"last_synced_commit":"4912ddaee34522833b28f08c9093ef2d095b7b40"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Freact-carousel3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Freact-carousel3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Freact-carousel3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Freact-carousel3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaxiangfeng","download_url":"https://codeload.github.com/xiaxiangfeng/react-carousel3d/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238463126,"owners_count":19476647,"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","carousel3d","react-carousel","react-carousel3d"],"created_at":"2025-02-12T11:28:04.789Z","updated_at":"2025-10-27T07:32:01.953Z","avatar_url":"https://github.com/xiaxiangfeng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-carousel3d\n\n\u003e A 3D perspective carousel。预览地址：https://xiaxiangfeng.github.io/react-carousel3d/#/carousel\n\n![Image text](https://xiaxiangfeng.github.io/react-carousel3d/image/Animation.gif)\n\n## 从 NPM 下载包\n\n```npm\nnpm i react-carousel3\n```\n\n## Basic usage\n\nDemo:\n\n```tsx\nimport React from 'react';\nimport { Carousel } from 'react-carousel3';\n\nconst style = {\n  width: 297,\n  height: 296,\n};\n\nexport default () =\u003e (\n  \u003cdiv\n    style={{\n      display: 'flex',\n      justifyContent: 'center',\n      background: 'linear-gradient(to bottom, #16235e 0%, #020223 100%)',\n    }}\n  \u003e\n    \u003cCarousel height={460} width={980} yOrigin={42} yRadius={48} autoPlay={true}\u003e\n      \u003cdiv key={1} style={style}\u003e\n        \u003cimg alt=\"\" src=\"/image/1.png\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv key={2} style={style}\u003e\n        \u003cimg alt=\"\" src=\"/image/2.png\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv key={3} style={style}\u003e\n        \u003cimg alt=\"\" src=\"/image/3.png\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv key={4} style={style}\u003e\n        \u003cimg alt=\"\" src=\"/image/4.png\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv key={5} style={style}\u003e\n        \u003cimg alt=\"\" src=\"/image/5.png\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv key={6} style={style}\u003e\n        \u003cimg alt=\"\" src=\"/image/6.png\" /\u003e\n      \u003c/div\u003e\n    \u003c/Carousel\u003e\n  \u003c/div\u003e\n);\n```\n\n### Carousel options\n\nYou may pass these options to the carousel constructor. Some of these properties may be changed during runtime via the data handle.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eOption\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\n    \u003ctd\u003econtainer height\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\n    \u003ctd\u003econtainer width\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003exOrigin\u003c/td\u003e\n    \u003ctd\u003eCenter of the carousel (x coordinate)\u003c/td\u003e\n    \u003ctd\u003e(container width / 2)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eyOrigin\u003c/td\u003e\n    \u003ctd\u003eCenter of the carousel (y coordinate)\u003c/td\u003e\n    \u003ctd\u003e(container height / 10)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003exRadius\u003c/td\u003e\n    \u003ctd\u003eHalf the width of the carousel\u003c/td\u003e\n    \u003ctd\u003e(container width / 2.3)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eyRadius\u003c/td\u003e\n    \u003ctd\u003eHalf the height of the carousel\u003c/td\u003e\n    \u003ctd\u003e(container height / 6)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eautoPlay\u003c/td\u003e\n    \u003ctd\u003eauto play\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Getting Started\n\nInstall dependencies,\n\n```bash\n$ npm i\n```\n\nStart the dev server,\n\n```bash\n$ npm start\n```\n\nBuild documentation,\n\n```bash\n$ npm run docs:build\n```\n\nRun test,\n\n```bash\n$ npm test\n```\n\nBuild library via `father`,\n\n```bash\n$ npm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaxiangfeng%2Freact-carousel3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaxiangfeng%2Freact-carousel3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaxiangfeng%2Freact-carousel3d/lists"}