{"id":14961204,"url":"https://github.com/jiangbo2015/framer-motion-carousel","last_synced_at":"2025-04-03T01:12:17.677Z","repository":{"id":44506981,"uuid":"418131311","full_name":"jiangbo2015/framer-motion-carousel","owner":"jiangbo2015","description":"framer-motion carousel, simple \u0026 easy to use","archived":false,"fork":false,"pushed_at":"2023-08-29T03:44:12.000Z","size":234,"stargazers_count":94,"open_issues_count":0,"forks_count":18,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T07:45:06.753Z","etag":null,"topics":["carousel","framer-motion","react-carousel"],"latest_commit_sha":null,"homepage":"https://carousel-app-pi.vercel.app","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/jiangbo2015.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-10-17T12:56:05.000Z","updated_at":"2025-03-10T23:12:24.000Z","dependencies_parsed_at":"2024-06-19T15:00:51.880Z","dependency_job_id":"d8fb4490-db37-428d-8732-a482fe372e55","html_url":"https://github.com/jiangbo2015/framer-motion-carousel","commit_stats":{"total_commits":16,"total_committers":4,"mean_commits":4.0,"dds":0.25,"last_synced_commit":"62d884c2377fa6ceb9d2c781f2a7d7bf8eaab93f"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiangbo2015%2Fframer-motion-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiangbo2015%2Fframer-motion-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiangbo2015%2Fframer-motion-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiangbo2015%2Fframer-motion-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jiangbo2015","download_url":"https://codeload.github.com/jiangbo2015/framer-motion-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246916761,"owners_count":20854514,"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","framer-motion","react-carousel"],"created_at":"2024-09-24T13:24:11.833Z","updated_at":"2025-04-03T01:12:17.647Z","avatar_url":"https://github.com/jiangbo2015.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# framer-motion-carousel\n\nA simple `framer-motion-carousel`, used for `framer-motion`, `chakra-ui`\nsupport `click` and `swipe`, support custom `arrows`, `dots`, easy to use.\n\n*2.x use `framer-motion@6` now*\n\n## Basic Usage\n\n```jsx\nimport * as React from \"react\";\nimport Carousel from \"framer-motion-carousel\";\n\nconst colors = [\"#f90\", \"#ef0\", \"#e0f\"];\n\nconst App = () =\u003e (\n  \u003cdiv style={{ width: 600, height: 400 }}\u003e\n    \u003cCarousel\u003e\n      {colors.map((item, i) =\u003e (\n        \u003cdiv\n          key={i}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            backgroundColor: colors[i],\n          }}\n        \u003e\u003c/div\u003e\n      ))}\n    \u003c/Carousel\u003e\n  \u003c/div\u003e\n);\nexport default App;\n```\n\n## images carousel\n\n`img` element should add `draggable=false`\n\n```jsx\n\u003cdiv style={{ width: 600, height: 400, margin: \"0 auto\" }}\u003e\n  \u003cCarousel\u003e\n    {[1, 2, 3, 4].map((item, i) =\u003e (\n      \u003cimg\n        draggable=\"false\"\n        src={`./${item}.jpg`}\n        key={i}\n        width=\"100%\"\n        alt=\"\"\n      /\u003e\n    ))}\n  \u003c/Carousel\u003e\n\u003c/div\u003e\n```\n\n## use external control button\n\n```jsx\n// set ref;\nconst carouselRef = React.useRef();\n\n\u003cdiv style={{ width: 600, height: 400, margin: \"0 auto\" }}\u003e\n    \u003cdiv style={{display: 'flex', gap: '10px', marginBottom: '10px'}}\u003e\n        \u003cbutton onClick={() =\u003e carouselRef.current.handlePrev()}\u003ehandlePrev\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e carouselRef.current.setIndex(2)}\u003egoto index 2\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e carouselRef.current.handleNext()}\u003ehandleNext\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cCarousel ref={carouselRef} autoPlay={false}\u003e\n        {[1, 2, 3, 4].map((item, i) =\u003e (\n            \u003cimg\n                draggable=\"false\"\n                src={`./${item}.jpeg`}\n                key={i}\n                width=\"100%\"\n                alt=\"\"\n            /\u003e\n        ))}\n    \u003c/Carousel\u003e\n\u003c/div\u003e\n```\n\n## Example\n\n[Live Demo](https://carousel-app-772051431.vercel.app)\n\n[example repo](https://github.com/jiangbo2015/framer-motion-carousel/tree/main/example)\n\n![example](https://cdn.jsdelivr.net/gh/jiangbo2015/framer-motion-carousel/img.jpg)\n\n\n## props\n\n| props            | type                                                                                 | default | description                                                          |\n|------------------|--------------------------------------------------------------------------------------|---------|----------------------------------------------------------------------|\n| loop             | boolean                                                                              | true    | loop play                                                            |\n| autoPlay         | boolean                                                                              | true    | auto play                                                            |\n| interval         | number                                                                               | 2000    | auto play interval                                                   |\n| renderArrowLeft  | ({handlePrev: () =\u003e void, activeIndex: number}) =\u003e React.ReactNode                   | null    | custom your arrows, `activeIndex` is current index                   |\n| renderArrowRight | ({handleNext: () =\u003e void, activeIndex: number}) =\u003e React.ReactNode                   | null    | custom your arrows, `activeIndex` is current index                   |\n| renderDots       | ({activeIndex: number, setActiveIndex: (index: number) =\u003e void;}) =\u003e React.ReactNode | null    | custom your dots, `activeIndex` is current index                     |\n| ref              | React.Ref                                                                            | null    | Carousel ref, support `handleNext`, `handlePrev`, `setIndex` method |\n\n\n\n## example\n\n```\ncd example \u0026\u0026 yarn install\n\nyarn dev\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiangbo2015%2Fframer-motion-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiangbo2015%2Fframer-motion-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiangbo2015%2Fframer-motion-carousel/lists"}