{"id":24280775,"url":"https://github.com/kkx64/react-simple-carousel","last_synced_at":"2025-09-25T01:30:24.419Z","repository":{"id":240431601,"uuid":"802452107","full_name":"kkx64/react-simple-carousel","owner":"kkx64","description":"A fast, lightweight and performant Carousel component for React.","archived":false,"fork":false,"pushed_at":"2024-10-13T23:41:09.000Z","size":2801,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-15T20:30:06.663Z","etag":null,"topics":["carousel","carousel-component","carousel-slider","drag","react"],"latest_commit_sha":null,"homepage":"https://kkx64.github.io/react-simple-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/kkx64.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":"2024-05-18T10:34:02.000Z","updated_at":"2024-10-13T23:39:54.000Z","dependencies_parsed_at":"2024-05-29T21:04:21.329Z","dependency_job_id":"b8672595-880c-40ae-ac2d-3fd2db1f56a1","html_url":"https://github.com/kkx64/react-simple-carousel","commit_stats":null,"previous_names":["kkx64/react-simple-carousel"],"tags_count":19,"template":false,"template_full_name":"jasonsturges/vite-typescript-npm-package","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkx64%2Freact-simple-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkx64%2Freact-simple-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkx64%2Freact-simple-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkx64%2Freact-simple-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kkx64","download_url":"https://codeload.github.com/kkx64/react-simple-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234140887,"owners_count":18785792,"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","carousel-component","carousel-slider","drag","react"],"created_at":"2025-01-16T02:33:29.748Z","updated_at":"2025-09-25T01:30:23.673Z","avatar_url":"https://github.com/kkx64.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/kirilkrsteski"],"categories":[],"sub_categories":[],"readme":"# @kkx64/react-simple-carousel\n\n[![@kkx64/react-simple-carousel's badge](https://deno.bundlejs.com/?q=@kkx64/react-simple-carousel\u0026badge=simple)](https://bundlejs.com/?q=@kkx64/react-simple-carousel)\n[![\"Buy Me A Coffee\"](https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?logo=buy-me-a-coffee)](https://buymeacoffee.com/kirilkrsteski)\n\nA simple, super-lightweight, performant \u0026 easy to modify carousel component for React. Built for simplicity and ease of use, **~7kB gzipped!**.  \nWorks on desktop with arrows and dragging on mobile.\n\nSee the [Storybook](https://kkx64.github.io/react-simple-carousel/?path=/story/carousel--basic-carousel) for demos.\nExamples can be found in the [CodeSandbox](https://codesandbox.io/p/sandbox/kkx64-react-simple-carousel-examples-z6ccm7).\n\n## Installation\n\nYou can install the package using your package manager of choice:\n\n```bash\npnpm add @kkx64/react-simple-carousel\nyarn add @kkx64/react-simple-carousel\nnpm install @kkx64/react-simple-carousel\n```\n\n## Usage\n\n### Basic Setup\n\nSetting up the carousel is super simple, just make sure that your wrapping element has a set height, as the `\u003cCarousel/\u003e` component has width and height set to `100%`:\n\n```tsx\nimport Carousel from \"@kkx64/react-simple-carousel\";\n\nconst MyCarousel = () =\u003e {\n  return (\n    \u003cCarousel\u003e\n      \u003cdiv\u003eSlide 1\u003c/div\u003e\n      \u003cdiv\u003eSlide 2\u003c/div\u003e\n      \u003cdiv\u003eSlide 3\u003c/div\u003e\n    \u003c/Carousel\u003e\n  );\n};\n\nexport default MyCarousel;\n```\n\n## Examples\n\nFor examples see the [CodeSandbox](https://codesandbox.io/p/sandbox/kkx64-react-simple-carousel-examples-z6ccm7).\n\n## Components\n\nThe library exports three components: `Carousel`, `CarouselDots` and `CarouselArrows`. They can all be used in combination or by themselves, depending on your needs. The `Carousel` component contains the other two components by default, unless they are overridden.\n\n## Carousel\n\n### CarouselProps\n\n- **shownSlides**: `number`  \n  The number of slides to be displayed simultaneously. You can also put decimal numbers to have the next slides be slightly visible.\n\n- **transitionDuration**: `number`  \n  The duration (in seconds) of the slide transition animation.\n\n- **transition**: `'slide' | 'fade'`  \n  The type of transition to apply to the slides. Currently `'slide' | 'fade'`.\n\n- **keyboardNavigation**: `boolean`  \n  Whether to use arrow keys to navigate between slides.  \n  **Default: `true`**\n\n- **containerClassName**: `string`  \n  **Additional** CSS class names for the carousel container.\n\n- **trackClassName**: `string`  \n  **Additional** CSS class names for the carousel track.\n\n- **slideClassName**: `string`  \n   **Additional** CSS class names for individual slides.  \n   You also have access to two extra classes:\n\n  ```css\n  .yourClass--active {\n    // controls the style of the active item\n  }\n  .yourClass--dragging {\n    // applied while the slide is being dragged\n  }\n  ```\n\n  Structure:\n\n  ```text\n  container\n  - track\n  -- slide (has data-index=\"\" property, if needed)\n  -- slide\n  - track\n  container\n  ```\n\n- **disableTranslate**: `boolean`  \n  Boolean indicating whether to disable CSS translation for slide animations.\n\n- **dotsGradient**: `boolean`  \n  Whether to fade out dots at the edges. Default is on - overrides to off when `dotsFixed = true`.\n\n- **dotsFixed**: `boolean`  \n  Set to `true` to disable dot scrolling and switch to fixed dot layout. Also disables dot fade gradient.\n\n- **centered**: `boolean`\n  If set to true, will place the active slide in the center of the carousel. Does nothing when `noActiveSlide` is true.\n  **Default: `false`**\n\n- **noActiveSlide**: `boolean`\n  If set to true acts like a normal carousel without \"active\" slides - has enough pages to just view all slides.\n  **Default: `false`**\n\n- **autoPlay**: `boolean`  \n  Whether to automatically move between slides.  \n  **Default: `false`**\n\n- **autoPlayInterval**: `number`  \n  Time between automatically moving between slides (s).  \n  **Default: `3`**\n\n- **pauseOnHover**: `boolean`  \n  Pause `autoPlay` while hovering.  \n  **Default: `false`**\n\n- **fitHeight**: `boolean`  \n  Have the Carousel fit around the contents instead of fill the parent.  \n  **Default: `false`**\n\n- **dotRender**: `({dot: number, isActive: boolean, ref: (element: HTMLElement) =\u003e void, onDotClick?: (index: number) =\u003e void }) =\u003e ReactNode`\n  Custom dot rendering function, to render special dots without completely removing the scrolling dots feature.\n\n- **customDots**: `((props: { dots: number; activeDot: number; onDotClick?: (index: number) =\u003e void; }) =\u003e JSX.Element) | null`  \n  A function that renders custom navigation dots, in place of the CarouselDots component.  \n  You can still use the existing `CarouselDots` component here, if you want to just override simple styles in the default layout.  \n  If you don't want to render any dots, pass `null` as a prop.\n\n- **customArrows**: `((props: { onNextClick: () =\u003e void; onPrevClick: () =\u003e void; }) =\u003e JSX.Element) | null`  \n  A function that renders custom navigation arrows.  \n  You can use the existing `CarouselArrows` component here, if you want to just override simple styles in the default layout.  \n  If you don't want to render any arrows, pass `null` as a prop.\n\n- **onSlideChange**: `(index: number) =\u003e void`  \n  A callback function invoked when the active slide changes.\n\n### CarouselRef\n\n- **nextSlide**: `() =\u003e void`  \n  A function to navigate to the next slide.\n\n- **prevSlide**: `() =\u003e void`  \n  A function to navigate to the previous slide.\n\n- **setSlide**: `(index: number) =\u003e void`  \n  A function to set the current slide.\n\n## CarouselDots\n\n### CarouselDotsProps\n\n- **onDotClick**: `(dot: number) =\u003e void`  \n  A callback function invoked when a dot is clicked. Receives the index of the clicked dot as an argument.\n\n- **dotRender**: `({dot: number, isActive: boolean, ref: (element: HTMLElement) =\u003e void }) =\u003e ReactNode`  \n  Custom dot rendering function, to render special dots without completely removing the scrolling dots feature.\n\n- **dots**: `number`  \n  The total number of dots to be rendered.\n\n- **activeDot**: `number`  \n  The index of the active dot.\n\n- **transitionDuration**: `number`\n  Transition duration for the sliding dots (in seconds). Passed down from `Carousel` if using default dots.\n\n- **containerClassName**: `string`  \n  **Additional** CSS class names for the container of the dots.\n\n- **wrapperClassName**: `string`  \n  **Additional** CSS class names for the wrapper of the dots.\n\n- **trackClassName**: `string`  \n  **Additional** CSS class names for the track of the dots.\n\n- **dotClassName**: `string`  \n  **Additional** CSS class names for individual dots.\n  Access the active dot with:\n\n  ```css\n  .yourClass--active {\n    // your styles\n  }\n  ```\n\n  Structure:\n\n  ```text\n  wrapper\n  - container\n   -- track\n   --- dot\n   --- dot\n   -- track\n  - container\n  wrapper\n  ```\n\n## CarouselArrows\n\n### CarouselArrowsProps\n\n- **onNextClick**: `() =\u003e void`  \n  A callback function invoked when the next arrow is clicked.\n\n- **onPrevClick**: `() =\u003e void`  \n  A callback function invoked when the previous arrow is clicked.\n\n- **containerClassName**: `string`  \n  **Additional** CSS class names for the container of the arrows.\n\n- **arrowClassName**: `string`  \n   **Additional** CSS class names for individual arrows.  \n   You have access to two additional classes:\n\n  ```css\n  .yourClass--prev{\n   // left arrow\n  }\n  .yourClass--next{\n    // right arrow\n  }\n  ```\n\n- **wrapperClassName**: `string`  \n   **Additional** CSS class names for the wrapper of the arrows.\n\n  Structure:\n\n  ```text\n  wrapper\n  - container\n    -- arrow\n    -- arrow\n  - container\n  wrapper\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkx64%2Freact-simple-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkkx64%2Freact-simple-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkx64%2Freact-simple-carousel/lists"}