{"id":18773510,"url":"https://github.com/farfetch/react-carousel","last_synced_at":"2025-10-06T22:27:44.781Z","repository":{"id":38173682,"uuid":"335983578","full_name":"Farfetch/react-carousel","owner":"Farfetch","description":"A react carousel component, with support for Swipe, Scroll and Snap Points.","archived":false,"fork":false,"pushed_at":"2023-07-19T01:27:52.000Z","size":6775,"stargazers_count":33,"open_issues_count":19,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T09:12:45.334Z","etag":null,"topics":["carousel","component","farfetch","hacktoberfest","react","reactjs","responsive"],"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/Farfetch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-04T14:43:31.000Z","updated_at":"2025-04-08T23:02:13.000Z","dependencies_parsed_at":"2024-11-07T19:36:55.875Z","dependency_job_id":"da244dd2-aa1b-4dfd-a685-631a52b0f046","html_url":"https://github.com/Farfetch/react-carousel","commit_stats":{"total_commits":40,"total_committers":8,"mean_commits":5.0,"dds":0.675,"last_synced_commit":"3d96a1b1d299f7d7451c32001f565e0db293a621"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Farfetch","download_url":"https://codeload.github.com/Farfetch/react-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688565,"owners_count":21145766,"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","component","farfetch","hacktoberfest","react","reactjs","responsive"],"created_at":"2024-11-07T19:34:17.176Z","updated_at":"2025-10-06T22:27:39.734Z","avatar_url":"https://github.com/Farfetch.png","language":"JavaScript","readme":"# react-carousel \u0026middot; [![license](https://img.shields.io/github/license/Farfetch/react-carousel)](LICENSE) ![build](https://github.com/Farfetch/React-Carousel/workflows/Publish%20react-carousel/badge.svg)\n\n\nA carousel component, with support for Swipe, Scroll and Snap Points.\n\n## Installing\n\n```bash\n$ npm install --save @farfetch/react-carousel\n```\n\n...and include it in your project\n\n```js\nimport { Carousel } from '@farfetch/react-carousel';\n```\n\nWe also include css styles out-of-the-box, to use them just import the css by doing the following:\n\n```js\nimport '@farfetch/react-carousel/styles.css'\n```\n\nIf you want to style the carousel by yourself, ignore this step.\n\n## Screenshots\n![Example](docs/example.png)\n\n### Infinite scroll demo\n![Infinite Scroll](docs/infinite-scroll-example.gif)\n\n## Concepts\n\nThe Carousel is fully operated by [`Context`](#CarouselContext), this gives the flexibility to extend it without having to change the core, as all the state of the [`Carousel`](#Carousel) is already exposed in the context.\n\nTo create a new carousel, you basically need two things: The wrapper ([`Carousel`](#Carousel)), a movement engine (one of the [sliders](#SwipeSlider)) and optional navigation [components](#Arrow). \n\nThe base structure would look like this:\n\n```jsx\nimport { Carousel, SwipeSlider, Bullets } from '@farfetch/react-carousel';\n\n/* The mandatory wrapper of the Carousel */\n\u003cCarousel\u003e\n    /* One of the available movement engines */\n    \u003cSwipeSlider\u003e\n        \u003cdiv\u003eItem 1\u003c/div\u003e\n        \u003cdiv\u003eItem 2\u003c/div\u003e\n        \u003cdiv\u003eItem 3\u003c/div\u003e\n        \u003cdiv\u003eItem 4\u003c/div\u003e\n        \u003cdiv\u003eItem 5\u003c/div\u003e\n    \u003c/SwipeSlider\u003e\n    \n    /* Optional navigation component */\n    \u003cBullets /\u003e\n\u003c/Carousel\u003e\n```\n\nYou have full control of what you can put inside the [`Carousel`](#Carousel) wrapper, including divs and others components. \n\nThe wrapper is nothing more than a `\u003cdiv\u003e` and the instance of the [`CarouselProvider`](#CarouselProvider), so all children already have access to the Context by default.\n\n### Architecture overview\n\n![react-carousel Architecture](docs/architecture-overview.png)\n\n## Usage examples\n\nIn the examples below we demonstrate the flexibility of the components, passing all the available props, just for demonstration purposes.\n\nExcept for the movement engines, you can mix all the examples to have the more adequate Carousel for your needs.\n\n### SwipeSlider\n\n```jsx\nimport { Carousel, SwipeSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst MyComponent = (props) =\u003e (\n    \u003cCarousel className={ Style.container } isInfinite isRTL itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cSwipeSlider className={ Style.slider } disableSwipe hasKeysNavigation\u003e\n            \u003cdiv className={ Style.customItem }\u003eItem 1\u003c/div\u003e\n            \u003cdiv className={ Style.moreCustomItem }\u003eItem 2\u003c/div\u003e\n            \u003cdiv\u003eItem 3\u003c/div\u003e\n            \u003cdiv\u003eItem 4\u003c/div\u003e\n            \u003cdiv\u003eItem 5\u003c/div\u003e\n        \u003c/SwipeSlider\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default MyComponent;\n```\n\n### ScrollSlider\n\n```jsx\nimport { Carousel, ScrollSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst MyComponent = (props) =\u003e (\n    \u003cCarousel className={ Style.container } isInfinite isRTL itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cScrollSlider className={ Style.slider } limitScroll\u003e\n            \u003cdiv className={ Style.customItem }\u003eItem 1\u003c/div\u003e\n            \u003cdiv className={ Style.moreCustomItem }\u003eItem 2\u003c/div\u003e\n            \u003cdiv\u003eItem 3\u003c/div\u003e\n            \u003cdiv\u003eItem 4\u003c/div\u003e\n            \u003cdiv\u003eItem 5\u003c/div\u003e\n        \u003c/ScrollSlider\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default MyComponent;\n```\n\n### SnapSlider\n\n```jsx\nimport { Carousel, SnapSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst MyComponent = (props) =\u003e (\n    \u003cCarousel className={ Style.container } isInfinite isRTL itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cSnapSlider className={ Style.slider }\u003e\n            \u003cdiv className={ Style.customItem }\u003eItem 1\u003c/div\u003e\n            \u003cdiv className={ Style.moreCustomItem }\u003eItem 2\u003c/div\u003e\n            \u003cdiv\u003eItem 3\u003c/div\u003e\n            \u003cdiv\u003eItem 4\u003c/div\u003e\n            \u003cdiv\u003eItem 5\u003c/div\u003e\n        \u003c/SnapSlider\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default MyComponent;\n```\n\n### With Bullets\n\n```jsx\nimport { Carousel, Bullets, SwipeSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst MyComponent = (props) =\u003e (\n    \u003cCarousel className={ Style.container } isInfinite isRTL itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cSwipeSlider className={ Style.slider } disableSwipe hasKeysNavigation\u003e\n            \u003cdiv className={ Style.customItem }\u003eItem 1\u003c/div\u003e\n            \u003cdiv className={ Style.moreCustomItem }\u003eItem 2\u003c/div\u003e\n            \u003cdiv\u003eItem 3\u003c/div\u003e\n            \u003cdiv\u003eItem 4\u003c/div\u003e\n            \u003cdiv\u003eItem 5\u003c/div\u003e\n        \u003c/SwipeSlider\u003e\n        \n        \u003cBullets theme={ BulletsTheme } /\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default MyComponent;\n```\n\n### With Arrows\n\n```jsx\nimport { Carousel, Bullets, SwipeSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst handleArrowClick = () =\u003e {\n    console.log('Clicked on the arrow');\n}\n\nconst MyComponent = (props) =\u003e (\n    \u003cCarousel className={ Style.container } isInfinite isRTL itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cSwipeSlider className={ Style.slider } disableSwipe hasKeysNavigation\u003e\n            \u003cdiv className={ Style.customItem }\u003eItem 1\u003c/div\u003e\n            \u003cdiv className={ Style.moreCustomItem }\u003eItem 2\u003c/div\u003e\n            \u003cdiv\u003eItem 3\u003c/div\u003e\n            \u003cdiv\u003eItem 4\u003c/div\u003e\n            \u003cdiv\u003eItem 5\u003c/div\u003e\n        \u003c/SwipeSlider\u003e\n        \n        \u003cArrow flow={ \"prev\" } onClick={ handleArrowClick }\u003e\n            { ({ onClick }) =\u003e \u003cbutton onClick={ onClick }\u003ePrevious\u003c/button\u003e }\n        \u003c/Arrow\u003e\n        \n        \u003cArrow flow={ \"next\" } onClick={ handleArrowClick }\u003e\n            { ({ onClick }) =\u003e \u003cbutton onClick={ onClick }\u003eNext\u003c/button\u003e }\n        \u003c/Arrow\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default MyComponent;\n```\n\n### Complex responsive Carousel\n\n```jsx\nimport { ResponsiveConsumer } from '@farfetch/react-context-responsive';\nimport { Carousel, Bullets, SwipeSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst handleArrowClick = () =\u003e {\n    console.log('Clicked on the arrow');\n}\nconst ResponsiveCarousel = (props) =\u003e (\n    const { children } = props;\n    \n    \u003cCarousel className={ Style.container } itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cResponsiveConsumer\u003e\n            { ({ lessThan }) =\u003e {\n                lessThan.md ? (\n                    \u003cScrollSlider className={ Style.slider }\u003e\n                        { children }\n                    \u003c/SwipeSlider\u003e\n                ) : \n                (\n                    \u003cSwipeSlider className={ Style.slider } disableSwipe hasKeysNavigation\u003e\n                        { children }\n                    \u003c/SwipeSlider\u003e\n                )\n            } }\n        \u003c/ResponsiveConsumer\u003e\n        \n        \u003cBullets theme={ BulletsTheme } /\u003e\n        \n        \u003cArrow flow={ \"prev\" } onClick={ handleArrowClick }\u003e\n            { ({ onClick }) =\u003e \u003cbutton onClick={ onClick }\u003ePrevious\u003c/button\u003e }\n        \u003c/Arrow\u003e\n        \n        \u003cArrow flow={ \"next\" } onClick={ handleArrowClick }\u003e\n            { ({ onClick }) =\u003e \u003cbutton onClick={ onClick }\u003eNext\u003c/button\u003e }\n        \u003c/Arrow\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default ResponsiveCarousel;\n```\n\n### With custom component\n\n```jsx\nimport { Carousel, CarouselContext, Bullets, SwipeSlider } from '@farfetch/react-carousel';\n\nconst handleAfterChange = (e) =\u003e {\n    console.log(e.index);\n    console.log(e.dir);\n};\n\nconst handleArrowClick = () =\u003e {\n    console.log('Clicked on the arrow');\n}\n\nconst Pagination = (props) =\u003e {\n    \u003cCarouselContext.Consumer\u003e\n        { ({ activeItem, itemsLength }) =\u003e \u003cdiv\u003e{ activeItem } of { itemsLength } items\u003c/div\u003e }\n    \u003c/CarouselContext.Consumer\u003e\n}\n\nconst MyComponent = (props) =\u003e (\n    \u003cCarousel className={ Style.container } isInfinite isRTL itemsToShow={ 2 } onAfterChange={ handleAfterChange }\u003e\n        \u003cSwipeSlider className={ Style.slider } disableSwipe hasKeysNavigation\u003e\n            \u003cdiv className={ Style.customItem }\u003eItem 1\u003c/div\u003e\n            \u003cdiv className={ Style.moreCustomItem }\u003eItem 2\u003c/div\u003e\n            \u003cdiv\u003eItem 3\u003c/div\u003e\n            \u003cdiv\u003eItem 4\u003c/div\u003e\n            \u003cdiv\u003eItem 5\u003c/div\u003e\n        \u003c/SwipeSlider\u003e\n        \n        \u003cPagination /\u003e\n        \n        \u003cArrow flow={ \"prev\" } onClick={ handleArrowClick }\u003e\n            { ({ onClick }) =\u003e \u003cbutton onClick={ onClick }\u003ePrevious\u003c/button\u003e }\n        \u003c/Arrow\u003e\n        \n        \u003cArrow flow={ \"next\" } onClick={ handleArrowClick }\u003e\n            { ({ onClick }) =\u003e \u003cbutton onClick={ onClick }\u003eNext\u003c/button\u003e }\n        \u003c/Arrow\u003e\n    \u003c/Carousel\u003e\n);\n\nexport default MyComponent;\n```\n\n## Components\n\nThe available components for the Carousel are:\n\n### \u003ca name=\"Carousel\"\u003e\u003c/a\u003eCarousel\n\nThe wrapper for the entire Carousel, it creates a wrapping `\u003cdiv\u003e` and an implementation of the [`CarouselProvider`](#CarouselProvider).\n\n#### Properties\n\n| Name              | Type   | Default | Description                                                                                                                                                          |\n|-------------------|--------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| className         | String |         | Desired theme's class names                                                                                                                                          |\n| children          | Node   |         | The components to construct the carousel                                                                                                                             |\n| isInfinite        | Bool   | false   | Enables the behaviour to go back to the start/end in the carousel edges                                                                                              |\n| isRTL             | Bool   | false   | Sets the carousel in RTL mode                                                                                                                                        |\n| itemsToShow       | Number | 1       | Number of visible items in the carousel                                                                                                                              |\n| onAfterChange     | Func   |         | Callback when changing the active item. Callback object: { index: Number - The new active index, dir: String - The movement direction ('prev' or 'next') } |\n| itemsToScroll             | Number   | 1   | The number of items to scroll when using [`Arrow`](#Arrow)      |\n\nIt also accepts additional props to be passed to the container.\n\n### \u003ca name=\"CarouselContext\"\u003e\u003c/a\u003eCarouselContext\n\nA React Context for the [`Carousel`](#Carousel), following the Context API.\n\n#### Context object\n\n| Name              | Type   | Description                                                                                                                                            |\n|-------------------|--------|--------------------------------------------------------------------------------------------------------------------------------------------------------|\n| activeItem        | Number | The active carousel item index (0 based)                                                         |\n| isRTL             | Bool   | Is the carousel in RTL mode                                                                                                                            |\n| isInfinite        | Bool   | Is the carousel in infinite mode                                                                                                                       |\n| itemsToShow       | Number | Number of visible items in the carousel                                                                                                                |\n| itemsLength       | Number | Total items length in the carousel                                                                                                                     |\n| setItemsLength    | Func   | Setter for the itemsLength value. Arguments: (itemsLength: Number - The new items length)                                                              |\n| goTo              | Func   | Move the carousel to an specific index. Arguments: (newIndex: Number - The new active item, options: Object - To be passed the onAfterChange callback) |\n| goNext            | Func   | Move to the next item, if possible. Arguments: (options: Object - To be passed the onAfterChange callback)                                             |\n| goPrev            | Func   | Move to the previous item, if possible. Arguments: (options: Object - To be passed the onAfterChange callback)                                         |\n| containerRef | Object | Component reference that can be used throughout the Carousel from the context |\n\n\n### \u003ca name=\"CarouselProvider\"\u003e\u003c/a\u003eCarouselProvider\n\nA provider for the [`CarouselContext`](#CarouselContext), already handling all the business logic and the state management for the Carousel.\n\n#### Properties\n\n| Name              | Type   | Default | Description                                                                                                                                                          |\n|-------------------|--------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| isInfinite        | Bool   | false   | Enables the behaviour to go back to the start/end in the carousel edges                                                                                              |\n| children          | Node   |         | Children to have the context available                                                                                                                               |\n| isRTL             | Bool   | false   | Sets the carousel in RTL mode                                                                                                                                        |\n| itemsToShow       | Number | 1       | Number of visible items in the carousel                                                                                                                              |\n| onAfterChange     | Func   |         | Callback for after the change of the active item. Callback object: { index: Number - The new active index, dir: String - The movement direction ('prev' or 'next') } |\n| startItem         | Number | 0 | Force to display a item by index\n\n### \u003ca name=\"Arrow\"\u003e\u003c/a\u003eArrow\n\nA render prop component that returns the onClick function, based on the props.\n\n#### Properties\n\n| Name              | Type   | Default | Description                                                                                                  |\n|-------------------|--------|---------|--------------------------------------------------------------------------------------------------------------|\n| flow              | String |         | The movement flow for the arrow. Allowed values: \"next\" and \"prev\"                                           |\n| children          | Node   |         | Function to render the component. Callback object: { onClick: Func - The onClick handler for the component } |\n| onClick           | Func   |         | Callback for the onClick                                                                                     |\n\n### \u003ca name=\"Bullets\"\u003e\u003c/a\u003eBullets\n\nThe pagination of the carousel, with infinite bullets support.\n\n#### Properties\n\n| Name              | Type   | Default | Description                                                                            |\n|-------------------|--------|---------|----------------------------------------------------------------------------------------|\n| theme             | Object |         | The theme object, as described below                                                   |\n\n#### Theming\n\n| Name              | Description |\n|-------------------|-------------|\n| container         |             |\n| containerDefault  |             |\n| containerInfinite |             |\n| moveInfinite      |             |\n| bullet            |             |\n| bulletInfinite    |             |\n| isSecondary       |             |\n| isActive          |             |\n\n\n### \u003ca name=\"SwipeSlider\"\u003e\u003c/a\u003eSwipeSlider\n\nA slider that uses Javascript swipe navigation and keyboard navigation.\n\n#### Properties\n\n| Name              | Type   | Default | Description                                                                            |\n|-------------------|--------|---------|----------------------------------------------------------------------------------------|\n| className         | String |         | Desired theme's class names                                                            |\n| children          | Node   |         | The items for the carousel                                                             |\n| disableSwipe      | Bool   | false   | Disables the swipe navigation                                                          |\n| hasKeysNavigation | Bool   | true    | Enables the keyboard navigation for the carousel                                       |\n\n#### Support for navigation components\n\nThe SwipeSlider has full support for all the navigation components.\n\n### \u003ca name=\"ScrollSlider\"\u003e\u003c/a\u003eScrollSlider\n\nA slider using native scroll navigation.  Variable-width items are **NOT** supported.\n\n#### Properties\n\n| Name        | Type                    | Default  | Description                                                                |\n|-------------|-------------------------|----------|----------------------------------------------------------------------------|\n| className   | String                  |          | Desired theme's class names                                                |\n| children    | Node                    |          | The items for the carousel                                                 |\n| limitScroll | Bool                    | false    | Limits the scroll depth to just one item (mobile only)                     |\n\n#### Support for navigation components\n\nThe ScrollSlider works with the [`Arrow`](#Arrow) component using the `requestAnimationFrame`, to have a smooth scroll for the item. \n\nIt also has support for the [`Bullets`](#Bullets).\n\n### \u003ca name=\"UnevenItemsScrollSlider\"\u003e\u003c/a\u003eUnevenItemsScrollSlider\n\nA slider using native scroll navigation.  `itemsToScroll` are **NOT** supported.  Other [`Carousel`](#Carousel) props not supported include `itemsToShow`, and `isInfinite`.\n\n#### Properties\n\n| Name        | Type                    | Default  | Description                                                                |\n|-------------|-------------------------|----------|----------------------------------------------------------------------------|\n| className   | String                  |          | Desired theme's class names                                                |\n| children    | Node                    |          | The items for the carousel                                                 |\n| ratioToScroll | Number                    | 1    | Range ratioToScroll \u003e 0 \u0026\u0026 ratioToScroll \u003c= 1.  The percentage (in decimal form) of the carousel viewport to scroll when using [`Arrow`](#Arrow)                    |\n| itemOnSizeChange    | Number                    |          | The item to go to when length of carousel changes.  If not specified, the carousel will remain where it is when resizing occurs                                                 |\n\n#### Support for navigation components\n\nThe UnevenItemsScrollSlider works with the [`Arrow`](#Arrow) component using the `requestAnimationFrame`, to have a smooth scroll for the item. \n\nIt also has support for [`Bullets`](#Bullets).\n\n### \u003ca name=\"SnapSlider\"\u003e\u003c/a\u003eSnapSlider\n\nA slider using native scroll navigation, with snap points, on browsers with support. \n\nIt fallback to the [`SwipeSlider`](#SwipeSlider) for browser with no support. \n\n**NOTE:** The Snap Points support can be laggy on Android and RTL mobile browsers. For those cases, prefer the [`SwipeSlider`](#SwipeSlider).\n\n#### Properties\n\n| Name           | Type                    | Default  | Description                                                                |\n|----------------|-------------------------|----------|----------------------------------------------------------------------------|\n| className      | String                  |          | Desired theme's class names                                                |\n| children       | Node                    |          | The items for the carousel                                                 |\n| limitScroll    | Bool                    | true     | Limits the scroll depth to just one item (mobile only)                     |\n\n\n#### Support for navigation components\n\nThe ScrollSlider **doesn't** work with the [`Arrow`](#Arrow) component, due to snap point support.\n\nIt supports the [`Bullets`](#Bullets) component.\n\n## Creating your own component\n\nAs the Carousel state is managed by a context, we can easily create new components extending the carousel logic.\n\nExample: \n\n```jsx\nimport { CarouselContext } from '@farfetch/react-carousel';\n\nconst Pagination = (props) =\u003e {\n    \u003cCarouselContext.Consumer\u003e\n        { ({ activeItem, itemsLength }) =\u003e \u003cdiv\u003e{ activeItem } of { itemsLength } items\u003c/div\u003e }\n    \u003c/CarouselContext.Consumer\u003e\n}\n\nexport default Pagination;\n```\n\nYou can easily consume any information from the [`CarouselContext.Consumer`](#CarouselContext) and also even create a new movement engine with a custom animation, for example, as all the functions are already exposed in the [`Context`](#CarouselContext).\n\n## React compatibility\n\nReact \u003e= `16.8.0` is required to use this package. \n\n## Contributing\n\nRead the [Contributing guidelines](./docs/CONTRIBUTING.md)\n\n### Disclaimer\n\nBy sending us your contributions, you are agreeing that your contribution is made subject to the terms of our [Contributor Ownership Statement](https://github.com/Farfetch/.github/blob/master/COS.md)\n\n## Maintainers\n\n* [dinospereira](https://github.com/dinospereira)\n* [SoaresMG](https://github.com/SoaresMG)\n* [sofiacteixeira](https://github.com/sofiacteixeira)\n* [themariamarques](https://github.com/themariamarques)\n\n## License\n\n[MIT](./LICENSE) \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarfetch%2Freact-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarfetch%2Freact-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarfetch%2Freact-carousel/lists"}