{"id":24329437,"url":"https://github.com/pietile/pietile-carousel","last_synced_at":"2025-09-27T15:31:37.190Z","repository":{"id":34081295,"uuid":"169464869","full_name":"pietile/pietile-carousel","owner":"pietile","description":"Fast and tiny React carousel","archived":false,"fork":false,"pushed_at":"2023-02-03T12:54:55.000Z","size":604,"stargazers_count":19,"open_issues_count":4,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-16T09:02:21.680Z","etag":null,"topics":["carousel","react","spring"],"latest_commit_sha":null,"homepage":"https://pietile-carousel.vercel.app","language":"TypeScript","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/pietile.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-06T19:35:34.000Z","updated_at":"2024-11-01T10:59:36.000Z","dependencies_parsed_at":"2023-02-18T07:01:07.305Z","dependency_job_id":null,"html_url":"https://github.com/pietile/pietile-carousel","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietile%2Fpietile-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietile%2Fpietile-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietile%2Fpietile-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pietile%2Fpietile-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pietile","download_url":"https://codeload.github.com/pietile/pietile-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234444615,"owners_count":18833658,"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","spring"],"created_at":"2025-01-18T00:15:37.231Z","updated_at":"2025-09-27T15:31:31.715Z","avatar_url":"https://github.com/pietile.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pietile Carousel\n\n[![npm version](https://badgen.net/npm/v/pietile-carousel?color=56C838)](https://www.npmjs.com/package/pietile-carousel)\n[![minzipped bundle size](https://badgen.net/bundlephobia/minzip/pietile-carousel)](https://bundlephobia.com/result?p=pietile-carousel)\n\nReact carousel based on [Framer Motion](https://github.com/framer/motion) without repaints and simple in use.\n\n## Features\n\n- Doesn't require to specify items dimensions (pure css solution)\n- Relies on translates for movements (zero paints)\n- Arbitrary number of visible items\n- Сyclicality\n\n## Installation\n\nUsing yarn\n\n```sh\nyarn add pietile-carousel\n```\n\nor using npm\n\n```sh\nnpm install -S pietile-carousel\n```\n\nPietile Carousel **depends** on [Framer Motion](https://github.com/framer/motion) which is a peer dependency so be sure that it's installed in you project (if not then install it using `yarn add framer-motion` or `npm install -S framer-motion`)\n\n## Usage\n\nEvery item is wrapped in container where it can layout it's content. The size of container depends on the size of carousel and amount of visible items. You can use any styling system you want to set styles. Get ref and use moveLeft/moveRight/moveTo methods for scroll.\n\n## Example\n\n```jsx\nimport React from 'react';\n\nimport { PietileCarousel } from 'pietile-carousel';\n\nfunction App() {\n  const carouselStyle = {\n    width: 150,\n    height: 100,\n  };\n\n  const itemStyle = {\n    width: '100%',\n    height: '100%',\n  };\n\n  return (\n    \u003cPietileCarousel style={carouselStyle}\u003e\n      \u003cdiv style={{ ...itemStyle, backgroundColor: 'red' }} /\u003e\n      \u003cdiv style={{ ...itemStyle, backgroundColor: 'orange' }} /\u003e\n      \u003cdiv style={{ ...itemStyle, backgroundColor: 'yellow' }} /\u003e\n    \u003c/PietileCarousel\u003e\n  );\n}\n```\n\n## API\n\n### Properties\n\n| name             | description                                |     type | default |\n| :--------------- | :----------------------------------------- | -------: | :------ |\n| autoplayInterval | How often autoplay happens (0 to disable)  |   number | 0       |\n| children         | Components rendered in carousel (required) |     Node | -       |\n| className        | CSS class                                  |   string | -       |\n| count            | Amount of visible items                    |   number | 1       |\n| draggable        | Allow drag                                 |  boolean | true    |\n| margin           | Margin between items                       |   number | 0       |\n| style            | Style object                               |   Object | -       |\n| onChange         | Callback when index changes                | Function | -       |\n\n### Methods\n\n| name           | description              |\n| :------------- | :----------------------- |\n| slideNext()    | Scroll to next slide     |\n| slidePrev()    | Scroll to previous slide |\n| slideTo(index) | Scroll to index          |\n\n## Note\n\nCarousel protects nesting links (a-tag's) from undesirable behavior (link click is being processed when the user starts dragging and release the mouse outside of the carousel) by calling `preventDefault` for the correspondent `click` event. If you are handling clicks manually you can check [defaultPrevented](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented) when processing your event.\n\n## License\n\nPietile Carousel is MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpietile%2Fpietile-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpietile%2Fpietile-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpietile%2Fpietile-carousel/lists"}