{"id":15037470,"url":"https://github.com/yizhuang/react-multi-carousel","last_synced_at":"2025-04-23T20:53:57.413Z","repository":{"id":37900110,"uuid":"173510594","full_name":"YIZHUANG/react-multi-carousel","owner":"YIZHUANG","description":"A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.","archived":false,"fork":false,"pushed_at":"2025-03-19T04:03:00.000Z","size":7048,"stargazers_count":1330,"open_issues_count":201,"forks_count":294,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-23T20:53:44.746Z","etag":null,"topics":["carousel","nextjs","react","server-side","ssr","typescript"],"latest_commit_sha":null,"homepage":"","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/YIZHUANG.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2019-03-02T23:36:24.000Z","updated_at":"2025-04-16T21:01:46.000Z","dependencies_parsed_at":"2023-02-08T16:32:04.954Z","dependency_job_id":"c9946bb8-e242-4e0f-89c5-7ab146c951ca","html_url":"https://github.com/YIZHUANG/react-multi-carousel","commit_stats":{"total_commits":458,"total_committers":37,"mean_commits":"12.378378378378379","dds":"0.28165938864628826","last_synced_commit":"061e721b3ed9e3bd83b131c92fc54bb0c9a0a534"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YIZHUANG%2Freact-multi-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YIZHUANG%2Freact-multi-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YIZHUANG%2Freact-multi-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YIZHUANG%2Freact-multi-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YIZHUANG","download_url":"https://codeload.github.com/YIZHUANG/react-multi-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514767,"owners_count":21443208,"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","nextjs","react","server-side","ssr","typescript"],"created_at":"2024-09-24T20:34:42.772Z","updated_at":"2025-04-23T20:53:57.392Z","avatar_url":"https://github.com/YIZHUANG.png","language":"TypeScript","funding_links":["https://opencollective.com/react-multi-carousel","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=GJSPRG9RKSJLQ\u0026source=url","https://opencollective.com/react-multi-carousel/contribute","https://opencollective.com/react-multi-carousel/organization/0/website","https://opencollective.com/react-multi-carousel/organization/1/website","https://opencollective.com/react-multi-carousel/organization/2/website","https://opencollective.com/react-multi-carousel/organization/3/website","https://opencollective.com/react-multi-carousel/organization/4/website","https://opencollective.com/react-multi-carousel/organization/5/website","https://opencollective.com/react-multi-carousel/organization/6/website","https://opencollective.com/react-multi-carousel/organization/7/website","https://opencollective.com/react-multi-carousel/organization/8/website","https://opencollective.com/react-multi-carousel/organization/9/website"],"categories":[],"sub_categories":[],"readme":"# react-multi-carousel 👋\n\n[![Financial Contributors on Open Collective](https://opencollective.com/react-multi-carousel/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-multi-carousel) [![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors)\n\nProduction-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering).\n\n[![Package Quality](https://npm.packagequality.com/shield/react-multi-carousel.svg)](https://packagequality.com/#?package=react-multi-carousel)\n[![npm version](https://badge.fury.io/js/react-multi-carousel.svg)](https://www.npmjs.com/package/react-multi-carousel)\n\u003ca href=\"https://www.npmjs.com/package/react-multi-carousel\"\u003e\n\u003cimg alt=\"download per month\" src=\"https://img.shields.io/npm/dm/react-multi-carousel\" target=\"_blank\" /\u003e\n\u003c/a\u003e\n[![Build Status](https://api.travis-ci.org/YIZHUANG/react-multi-carousel.svg?branch=master)](https://travis-ci.org/YIZHUANG/react-multi-carousel)\n\u003ca href=\"https://react-multi-carousel.surge.sh\"\u003e\n\u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" target=\"_blank\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/graphs/commit-activity\"\u003e\n\u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" target=\"_blank\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/blob/master/LICENSE\"\u003e\n\u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" target=\"_blank\" /\u003e\n\u003c/a\u003e\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel?ref=badge_shield)\n[![David Dependancy Status](https://david-dm.org/YIZHUANG/react-multi-carousel.svg)](https://david-dm.org/YIZHUANG/react-multi-carousel)\n[![Known Vulnerabilities](https://snyk.io/test/github/YIZHUANG/react-multi-carousel/badge.svg?targetFile=package.json)](https://snyk.io/test/github/YIZHUANG/react-multi-carousel?targetFile=package.json)\n\n![demo](https://media.giphy.com/media/emNGIfso7Iu66qz53C/giphy.gif)\n\n![demo](https://media.giphy.com/media/3octyw2XELzfaplNUm/giphy.gif)\n\n### Hello world!\n\nWe are on a very excited journey towards version 3.0 of this component which will be rewritten in hooks/context completely. It means smaller bundle size, performance improvement and easier customization of the component and so many more benefits.\n\nIt would mean so much if you could provide help towards the further development of this project as we do this open source work in our own free time especially during this covid-19 crisis.\n\nIf you are using this component seriously, please donate or talk to your manager as this project increases your income too. It will help us make releases, fix bugs, fulfill new feature requests faster and better.\n\n[Become a backer/sponsor](https://opencollective.com/react-multi-carousel) to get your logo/image on our README on Github with a link to your site.\n\n### Features.\n\n- Server-side rendering\n- Infinite mode\n- Dot mode\n- Custom animation\n- AutoPlay mode\n- Auto play interval\n- Supports images, videos, everything.\n- Responsive\n- Swipe to slide\n- Mouse drag to slide\n- Keyboard control to slide\n- Multiple items\n- Show / hide arrows\n- Custom arrows / control buttons\n- Custom dots\n- Custom styling\n- Accessibility support\n- Center mode.\n- Show next/previous set of items partially\n- RTL support\n\n### Shoutouts 🙏\n\n\u003cimg src=\"/browserstack-logo-600x315.png\" height=\"80\" title=\"BrowserStack Logo\" alt=\"BrowserStack Logo\" /\u003e\n\nBig thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser issues.\n\n## [Documentation](https://react-multi-carousel.surge.sh)\n\n## Other important links.\n\n- [Code sandbox](https://codesandbox.io/embed/2omn67p8kj)\n- [Contributing](https://github.com/YIZHUANG/react-multi-carousel/blob/master/contributing.md)\n- [Changelog](https://github.com/YIZHUANG/react-multi-carousel/blob/master/CHANGELOG.md)\n- [Releases](https://github.com/YIZHUANG/react-multi-carousel/releases)\n- [TypeScript usage](https://github.com/YIZHUANG/react-multi-carousel/blob/master/TypeScriptUsage.md)\n- [SSR demo](https://react-multi-carousel.now.sh/)\n\n## Bundle size\n\n[Bundle-size](https://bundlephobia.com/result?p=react-multi-carousel).\n2.5kB\n\n## Demo.\n\nDocumentation is [here](https://react-multi-carousel.surge.sh).\n\nDemo for the SSR \u003chttps://react-multi-carousel.now.sh/\u003e\n\nTry to disable JavaScript to test if it renders on the server-side.\n\nCodes for SSR at [github](https://github.com/YIZHUANG/react-multi-carousel/blob/master/examples/ssr/pages/index.js).\n\nCodes for the documentation at [github](https://github.com/YIZHUANG/react-multi-carousel/blob/master/stories/index.stories.js).\n\n## Install\n\n```\n$ npm install react-multi-carousel --save\n\nimport Carousel from 'react-multi-carousel';\nimport 'react-multi-carousel/lib/styles.css';\n```\n\n### How the SSR mode works?\n\nCodes for SSR at [github](https://github.com/YIZHUANG/react-multi-carousel/blob/master/examples/ssr/pages/index.js).\n\n- Demo for the SSR are at [here](https://react-multi-carousel.now.sh/)\n- Try to disable JavaScript to test if it renders on the server-side.\n\nHere is a lighter version of the library for detecting the user's device type [alternative](https://github.com/faisalman/ua-parser-js)\n\nYou can choose to only bundle it on the server-side.\n\n## Minimum working set up.\n\n```js\nimport Carousel from \"react-multi-carousel\";\nimport \"react-multi-carousel/lib/styles.css\";\nconst responsive = {\n  superLargeDesktop: {\n    // the naming can be any, depends on you.\n    breakpoint: { max: 4000, min: 3000 },\n    items: 5\n  },\n  desktop: {\n    breakpoint: { max: 3000, min: 1024 },\n    items: 3\n  },\n  tablet: {\n    breakpoint: { max: 1024, min: 464 },\n    items: 2\n  },\n  mobile: {\n    breakpoint: { max: 464, min: 0 },\n    items: 1\n  }\n};\n\u003cCarousel responsive={responsive}\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\u003c/Carousel\u003e;\n```\n\n## Common Usage\n\n```js\nimport Carousel from \"react-multi-carousel\";\nimport \"react-multi-carousel/lib/styles.css\";\n\nconst responsive = {\n  desktop: {\n    breakpoint: { max: 3000, min: 1024 },\n    items: 3,\n    slidesToSlide: 3 // optional, default to 1.\n  },\n  tablet: {\n    breakpoint: { max: 1024, min: 464 },\n    items: 2,\n    slidesToSlide: 2 // optional, default to 1.\n  },\n  mobile: {\n    breakpoint: { max: 464, min: 0 },\n    items: 1,\n    slidesToSlide: 1 // optional, default to 1.\n  }\n};\n\u003cCarousel\n  swipeable={false}\n  draggable={false}\n  showDots={true}\n  responsive={responsive}\n  ssr={true} // means to render carousel on server-side.\n  infinite={true}\n  autoPlay={this.props.deviceType !== \"mobile\" ? true : false}\n  autoPlaySpeed={1000}\n  keyBoardControl={true}\n  customTransition=\"all .5\"\n  transitionDuration={500}\n  containerClass=\"carousel-container\"\n  removeArrowOnDeviceType={[\"tablet\", \"mobile\"]}\n  deviceType={this.props.deviceType}\n  dotListClass=\"custom-dot-list-style\"\n  itemClass=\"carousel-item-padding-40-px\"\n\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\u003c/Carousel\u003e;\n```\n\n## Custom Arrows.\n\nYou can pass your own custom arrows to make it the way you want, the same for the position. For example, add media query for the arrows to go under when on smaller screens.\n\nYour custom arrows will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress.\n\n[Code](https://github.com/YIZHUANG/react-multi-carousel/blob/master/stories/CustomArrows.js)\n\n```js\nconst CustomRightArrow = ({ onClick, ...rest }) =\u003e {\n  const {\n    onMove,\n    carouselState: { currentSlide, deviceType }\n  } = rest;\n  // onMove means if dragging or swiping in progress.\n  return \u003cbutton onClick={() =\u003e onClick()} /\u003e;\n};\n\u003cCarousel customRightArrow={\u003cCustomRightArrow /\u003e} /\u003e;\n```\n\n## Custom button group.\n\nThis is very useful if you don't want the dots, or arrows and you want to fully customize the control functionality and styling yourself.\n\n[Code](https://github.com/YIZHUANG/react-multi-carousel/blob/master/stories/CustomArrows.js)\n\n```js\nconst ButtonGroup = ({ next, previous, goToSlide, ...rest }) =\u003e {\n  const { carouselState: { currentSlide } } = rest;\n  return (\n    \u003cdiv className=\"carousel-button-group\"\u003e // remember to give it position:absolute\n      \u003cButtonOne className={currentSlide === 0 ? 'disable' : ''} onClick={() =\u003e previous()} /\u003e\n      \u003cButtonTwo onClick={() =\u003e next()} /\u003e\n      \u003cButtonThree onClick={() =\u003e goToSlide(currentSlide + 1)}\u003e Go to any slide \u003c/ButtonThree\u003e\n    \u003c/div\u003e\n  );\n};\n\u003cCarousel arrows={false} customButtonGroup={\u003cButtonGroup /\u003e}\u003e\n  \u003cItemOne\u003e\n  \u003cItemTwo\u003e\n\u003c/Carousel\u003e\n```\n\n## renderButtonGroupOutside\n\nPassing this props would render the button group outside of the Carousel container. This is done using React.fragment\n\n```js\n\u003cdiv className='my-own-custom-container'\u003e\n  \u003cCarousel arrows={false} renderButtonGroupOutside={true} customButtonGroup={\u003cButtonGroup /\u003e}\u003e\n    \u003cItemOne\u003e\n    \u003cItemTwo\u003e\n  \u003c/Carousel\u003e\n\u003c/div\u003e\n```\n\n## Custom dots.\n\nYou can pass your own custom dots to replace the default one.\n\nCustom dots can also be a copy or an image of your carousel item. See example in this [one](https://react-multi-carousel.now.sh/)\n\nThe codes for this [example](https://github.com/YIZHUANG/react-multi-carousel/blob/master/examples/ssr/components/carousel-with-custom-dots.js)\n\nYou custom dots will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress.\n\n[Code](https://github.com/YIZHUANG/react-multi-carousel/blob/master/stories/CustomDot.js)\n\n```js\nconst CustomDot = ({ onClick, ...rest }) =\u003e {\n  const {\n    onMove,\n    index,\n    active,\n    carouselState: { currentSlide, deviceType }\n  } = rest;\n  const carouselItems = [CarouselItem1, CaourselItem2, CarouselItem3];\n  // onMove means if dragging or swiping in progress.\n  // active is provided by this lib for checking if the item is active or not.\n  return (\n    \u003cbutton\n      className={active ? \"active\" : \"inactive\"}\n      onClick={() =\u003e onClick()}\n    \u003e\n      {React.Children.toArray(carouselItems)[index]}\n    \u003c/button\u003e\n  );\n};\n\u003cCarousel showDots customDot={\u003cCustomDot /\u003e}\u003e\n  {carouselItems}\n\u003c/Carousel\u003e;\n```\n\n## renderDotsOutside\n\nPassing this props would render the dots outside of the Carousel container. This is done using React.fragment\n\n```js\n\u003cdiv className='my-own-custom-container'\u003e\n  \u003cCarousel arrows={false} showDots={true} renderDotsOutside={renderButtonGroupOutside}\u003e\n    \u003cItemOne\u003e\n    \u003cItemTwo\u003e\n  \u003c/Carousel\u003e\n\u003c/div\u003e\n```\n\n## partialVisible props.\n\nShows the next items partially, this is very useful if you want to indicate to the users that this carousel component is swipable, has more items behind it.\n\nThis is different from the \"centerMode\" prop, as it only shows the next items. For the centerMode, it shows both.\n\n```js\nconst responsive = {\n  desktop: {\n    breakpoint: { max: 3000, min: 1024 },\n    items: 3,\n    partialVisibilityGutter: 40 // this is needed to tell the amount of px that should be visible.\n  },\n  tablet: {\n    breakpoint: { max: 1024, min: 464 },\n    items: 2,\n    partialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.\n  },\n  mobile: {\n    breakpoint: { max: 464, min: 0 },\n    items: 1,\n    partialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.\n  }\n}\n\u003cCarousel partialVisible={true} responsive={responsive}\u003e\n  \u003cItemOne /\u003e\n  \u003cItemTwo /\u003e\n\u003c/Carousel\u003e\n```\n\n## centerMode\n\nShows the next items and previous items partially.\n\n```js\n\u003cCarousel centerMode={true} /\u003e\n```\n\n## afterChange callback.\n\nThis is a callback function that is invoked each time when there has been a sliding.\n\n```js\n\u003cCarousel\n  afterChange={(previousSlide, { currentSlide, onMove }) =\u003e {\n    doSpeicalThing();\n  }}\n/\u003e\n```\n\n## beforeChange call back\n\nThis is a callback function that is invoked each time before a sliding.\n\n```js\n\u003cCarousel\n  beforeChange={(nextSlide, { currentSlide, onMove }) =\u003e {\n    doSpeicalThing();\n  }}\n/\u003e\n```\n\n## Combine beforeChange and nextChange, real usage.\n\nThey are very useful in the following cases:\n\n- The carousel item is clickable, but you don't want it to be clickable while the user is dragging it or swiping it.\n\n```js\n\u003cCarousel\n  beforeChange={() =\u003e this.setState({ isMoving: true })}\n  afterChange={() =\u003e this.setState({ isMoving: false })}\n\u003e\n  \u003ca\n    onClick={e =\u003e {\n      if (this.state.isMoving) {\n        e.preventDefault();\n      }\n    }}\n    href=\"https://w3js.com\"\n  \u003e\n    Click me\n  \u003c/a\u003e\n\u003c/Carousel\u003e\n```\n\n- Preparing for the next slide.\n\n```js\n\u003cCarousel beforeChange={nextSlide =\u003e this.setState({ nextSlide: nextSlide })}\u003e\n  \u003cdiv\u003eInitial slide\u003c/div\u003e\n  \u003cdiv\n    onClick={() =\u003e {\n      if (this.state.nextSlide === 1) {\n        doVerySpecialThing();\n      }\n    }}\n  \u003e\n    Second slide\n  \u003c/div\u003e\n\u003c/Carousel\u003e\n```\n\n## Skipping callbacks\n\nWhen calling the `goToSlide` function on a Carousel the callbacks will be run by default. You can skip all or individul callbacks by passing a second parameter to `goToSlide.`\n\n```js\nthis.Carousel.goToSlide(1, true); // Skips both beforeChange and afterChange\nthis.Carousel.goToSlide(1, { skipBeforeChange: true }); // Skips only beforeChange\nthis.Carousel.goToSlide(1, { skipAfterChange: true }); // Skips only afterChange\n```\n\n## focusOnSelect\n\nGo to slide on click and make the slide a current slide.\n\n```js\n\u003cCarousel focusOnSelect={true} /\u003e\n```\n\n## Using ref.\n\n```js\n\u003cCarousel ref={(el) =\u003e (this.Carousel = el)} arrows={false} responsive={responsive}\u003e\n  \u003cItemOne /\u003e\n  \u003cItemTwo /\u003e\n\u003c/Carousel\u003e\n\u003cbutton onClick={() =\u003e {\n    const nextSlide = this.Carousel.state.currentSlide + 1;\n     // this.Carousel.next()\n     // this.Carousel.goToSlide(nextSlide)\n  }}\u003eClick me\u003c/button\u003e\n```\n\n## additionalTransfrom Props.\n\nThis is very useful when you are fully customizing the control functionality by yourself like this [one](https://react-multi-carousel.surge.sh/?selectedKind=Carousel\u0026selectedStory=With%20custom%20control%20functionality\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Factions%2Factions-panel)\n\n[Code](https://github.com/YIZHUANG/react-multi-carousel/blob/master/stories/WithScrollbar.js)\n\nFor example if you give to your carousel item padding left and padding right 20px. And you have 5 items in total, you might want to do the following:\n\n```js\n\u003cCarousel ref={el =\u003e (this.Carousel = el)} additionalTransfrom={-20 * 5} /\u003e // it needs to be a negative number\n```\n\n## Specific Props\n\n| Name                    |                                                                        Type                                                                        |              Default              | Description                                                                                                                                                           |\n| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| responsive              |                                                                      `object`                                                                      |               `{}`                | Numbers of slides to show at each breakpoint                                                                                                                          |\n| deviceType              |                                                                      `string`                                                                      |               `''`                | Only pass this when use for server-side rendering, what to pass can be found in the example folder                                                                    |\n| ssr                     |                                                                     `boolean`                                                                      |              `false`              | Use in conjunction with responsive and deviceType prop                                                                                                                |\n| slidesToSlide           |                                                                      `Number`                                                                      |                `1`                | How many slides to slide.                                                                                                                                             |\n| draggable               |                                                                     `boolean`                                                                      |              `true`               | Optionally disable/enable dragging on desktop                                                                                                                         |\n| swipeable               |                                                                     `boolean`                                                                      |              `true`               | Optionally disable/enable swiping on mobile                                                                                                                           |\n| arrows                  |                                                                     `boolean`                                                                      |              `true`               | Hide/Show the default arrows                                                                                                                                          |\n| renderArrowsWhenDisabled                  |                                                                     `boolean`                                                                      |              `false`               | Allow for the arrows to have a disabled attribute instead of not showing them                                                                                                                                          |\n| removeArrowOnDeviceType |                                                                 `string or array`                                                                  |               `''`                | Hide the default arrows at different break point, should be used with `responsive` props. Value could be `mobile` or `['mobile', 'tablet'], can be a string or array` |\n| customLeftArrow         |                                                                       `jsx`                                                                        |              `null`               | Replace the default arrow with your own                                                                                                                               |\n| customRightArrow        |                                                                       `jsx`                                                                        |              `null`               | Replace the default arrow with your own                                                                                                                               |\n| customDot               |                                                                       `jsx`                                                                        |               null                | Replace the default dots with your own                                                                                                                                |\n| customButtonGroup       |                                                                       `jsx`                                                                        |               null                | Fully customize your own control functionality if you don't want arrows or dots                                                                                       |\n| infinite                |                                                                     `boolean`                                                                      |               false               | Enables infinite scrolling in both directions. Carousel items are cloned in the DOM to achieve this.                                                                                                                                                        |\n| minimumTouchDrag        |                                                                      `number`                                                                      |               `50`                | The amount of distance to drag / swipe in order to move to the next slide.                                                                                            |\n| afterChange             |                                                                     `function`                                                                     |              `null`               | A callback after sliding everytime.                                                                                                                                   |\n| beforeChange            |                                                                     `function`                                                                     |              `null`               | A callback before sliding everytime.                                                                                                                                  |\n| sliderClass             |                                                                      `string`                                                                      |  `'react-multi-carousel-track'`   | CSS class for inner slider div, use this to style your own track list.                                                                                                |\n| itemClass               |                                                                      `string`                                                                      |               `''`                | CSS class for carousel item, use this to style your own Carousel item. For example add padding-left and padding-right                                                 |\n| containerClass          |                                                                      `string`                                                                      |   `'react-multi-carousel-list'`   | Use this to style the whole container. For example add padding to allow the \"dots\" or \"arrows\" to go to other places without being overflown.                         |\n| dotListClass            |                                                                      `string`                                                                      | `'react-multi-carousel-dot-list'` | Use this to style the dot list.                                                                                                                                       |\n| keyBoardControl         |                                                                     `boolean`                                                                      |              `true`               | Use keyboard to navigate to next/previous slide                                                                                                                       |\n| autoPlay                |                                                                     `boolean`                                                                      |              `false`              | Auto play                                                                                                                                                             |\n| autoPlaySpeed           |                                                                      `number`                                                                      |               3000                | The unit is ms                                                                                                                                                        |\n| showDots                |                                                                     `boolean`                                                                      |              `false`              | Hide the default dot list                                                                                                                                             |\n| renderDotsOutside       |                                                                     `boolean`                                                                      |              `false`              | Show dots outside of the container                                                                                                                                    |\n| partialVisible          |                                                                 `boolean` | `string`                                                                 |              `false`              | Show partial next slides. This is use with the `responsive` prop, see example for details                                                                             |\n| customTransition        |                                                                      `string`                                                                      |   `transform 300ms ease-in-out`   | Configure your own anaimation when sliding                                                                                                                            |\n| transitionDuration      | `number |`300` | The unit is ms, if you are using customTransition, make sure to put the duration here as this is needed for the resizing to work. |\n| focusOnSelect           |                                    `boolean` |`false` | Go to slide on click and make the slide a current slide.                                    |\n| centerMode              |                                       `boolean` |`false` | Shows the next items and previous items partially.                                       |\n| additionalTransfrom     |                                              `number` |`0` | additional transfrom to the current one.                                               |\n| shouldResetAutoplay     |                                              `boolean` |`true` | resets autoplay when clicking next, previous button and the dots                                              |\n| rewind     |                                              `boolean` |`false` | if infinite is not enabled and autoPlay explicitly is, this option rewinds the carousel when the end is reached (Lightweight infinite mode alternative without cloning).\n| rewindWithAnimation     |                                              `boolean` |`false` | when rewinding the carousel back to the beginning, this decides if the rewind process should be instant or with transition.                                             |\n| rtl     |                                              `boolean` |`false` | Sets the carousel direction to be right to left                                              |\n\n## Author\n\n👤 **Yi Zhuang**\n\n- Github: [@YIZHUANG](https://github.com/YIZHUANG)\n\n## 🤝 Contribute\n\nPlease read https://github.com/YIZHUANG/react-multi-carousel/blob/master/contributing.md\n\nSubmit an issue for feature request or submit a pr.\n\n## Local development.\n\n- cd app\n- npm install\n- npm run dev\n\n## Donation\n\nIf this project help you reduce time to develop, you can give me a cup of coffee :)\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=GJSPRG9RKSJLQ\u0026source=url)\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-multi-carousel/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/react-multi-carousel\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/react-multi-carousel/contribute)]\n\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-multi-carousel/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/react-multi-carousel/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel?ref=badge_large)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/revskill10\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1390196?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTruong Hoang Dung\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=revskill10\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tpinne\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1384345?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTobias Pinnekamp\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=tpinne\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://raajnadar.in\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/17236768?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRajendran Nadar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=raajnadar\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/abhinavdalal-iconnect\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/35057308?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAbhinav Dalal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=abhinavdalal-iconnect\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://oscarbarrett.github.io/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/3511332?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOscar Barrett\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=OscarBarrett\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/neamatmim\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/37859935?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNeamat Mim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=neamatmim\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Martinretrou\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/17448102?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMartin Retrou\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=Martinretrou\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://benhodgson.net\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/189707?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBen Hodgson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=benhodgson87\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.fiverr.com/mfaizan1\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/17065546?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFaizan ul haq\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=mfaizan1\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Adrian3PG\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/54852308?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdrian3PG\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=Adrian3PG\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kuznetsovgm\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/46741704?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ekuznetsovgm\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=kuznetsovgm\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://t.me/s/filimonovvadim\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/11225648?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVadim Filimonov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=VadimFilimonov\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/groomain\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/3601848?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRomain\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=groomain\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://rileylundquist.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5504497?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRiley Lundquist\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=rlundquist3\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ak-pdeshaies\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/78373209?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePaul Deshaies Jr\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=ak-pdeshaies\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/donotcodeit\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/30778436?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePavel Mikheev\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=donotcodeit\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nev1d\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/69861627?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003enev1d\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=nev1d\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://brandinavian.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/62725224?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMads Vammen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=MaSchVam\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jir-f\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/13970855?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJiro Farah\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/YIZHUANG/react-multi-carousel/commits?author=jir-f\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyizhuang%2Freact-multi-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyizhuang%2Freact-multi-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyizhuang%2Freact-multi-carousel/lists"}