{"id":46634025,"url":"https://github.com/vadymshymko/react-simply-carousel","last_synced_at":"2026-03-08T00:35:03.543Z","repository":{"id":37269702,"uuid":"130750848","full_name":"vadymshymko/react-simply-carousel","owner":"vadymshymko","description":"A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable","archived":false,"fork":false,"pushed_at":"2026-03-02T07:54:04.000Z","size":2839,"stargazers_count":143,"open_issues_count":3,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-02T11:54:07.146Z","etag":null,"topics":["carousel","carousel-component","carousel-plugin","carousel-slider","controlled-components","infinite","react","react-carousel","react-component","responsive-carousel","ssr","touch-enabled","typescript","typescript-react"],"latest_commit_sha":null,"homepage":"https://github.com/vadymshymko/react-simply-carousel","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/vadymshymko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-04-23T20:09:26.000Z","updated_at":"2026-03-02T07:54:07.000Z","dependencies_parsed_at":"2023-02-08T11:46:38.616Z","dependency_job_id":"9ae05dcc-d157-4de1-a7b4-c5e2f21b73a0","html_url":"https://github.com/vadymshymko/react-simply-carousel","commit_stats":{"total_commits":238,"total_committers":4,"mean_commits":59.5,"dds":0.2184873949579832,"last_synced_commit":"26a64c24660be1b7da601a0692d7d055555b515a"},"previous_names":[],"tags_count":88,"template":false,"template_full_name":null,"purl":"pkg:github/vadymshymko/react-simply-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-simply-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-simply-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-simply-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-simply-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadymshymko","download_url":"https://codeload.github.com/vadymshymko/react-simply-carousel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-simply-carousel/sbom","scorecard":{"id":914531,"data":{"date":"2025-08-11","repo":{"name":"github.com/vadymshymko/react-simply-carousel","commit":"08f313dc0186d14000f640ec7262adaf6ac7af13"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":9,"reason":"11 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 9","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql-analysis.yml:28","Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql-analysis.yml:29","Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1","Info: topLevel 'contents' permission set to 'read': .github/workflows/dependency-review.yml:11","Warn: no topLevel permission defined: .github/workflows/npm-publish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:70: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/dependency-review.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/dependency-review.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/npm-publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/npm-publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/npm-publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/vadymshymko/react-simply-carousel/npm-publish.yml/main?enable=pin","Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: SECURITY.md:1","Info: Found linked content: SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1","Info: Found text in security policy: SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":7,"reason":"SAST tool detected but not run on all commits","details":["Info: SAST configuration detected: CodeQL","Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":9,"reason":"1 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T20:29:49.174Z","repository_id":37269702,"created_at":"2025-08-24T20:29:49.174Z","updated_at":"2025-08-24T20:29:49.174Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30238939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T00:30:53.000Z","status":"ssl_error","status_checked_at":"2026-03-08T00:30:44.061Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-plugin","carousel-slider","controlled-components","infinite","react","react-carousel","react-component","responsive-carousel","ssr","touch-enabled","typescript","typescript-react"],"created_at":"2026-03-08T00:35:02.966Z","updated_at":"2026-03-08T00:35:03.519Z","avatar_url":"https://github.com/vadymshymko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-simply-carousel\n\n[![npm version](https://img.shields.io/npm/v/react-simply-carousel)](https://www.npmjs.com/package/react-simply-carousel)\n[![minified + gzip](https://img.shields.io/bundlephobia/minzip/react-simply-carousel/latest)](https://bundlephobia.com/package/react-simply-carousel@latest)\n[![typescript](https://badgen.net/npm/types/react-simply-carousel)](https://unpkg.com/react-simply-carousel/dist/index.d.ts)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/react-simply-carousel/blob/master/LICENSE)\n\nA simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. [Fully customizable](#props)\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Demo](#demo)\n\n## Installation\n\n**npm**\n\n```bash\nnpm install react-simply-carousel --save\n```\n\n**yarn**\n\n```bash\nyarn add react-simply-carousel\n```\n\n## Usage\n\n#### Basic Example:\n\n```js\nimport { useState } from 'react';\nimport ReactSimplyCarousel from 'react-simply-carousel';\n\nfunction ReactSimplyCarouselExample() {\n const [activeSlideIndex, setActiveSlideIndex] = useState(0);\n\n return (\n \u003cdiv\u003e\n \u003cReactSimplyCarousel\n activeSlideIndex={activeSlideIndex}\n onRequestChange={setActiveSlideIndex}\n itemsToShow={1}\n itemsToScroll={1}\n forwardBtnProps={{\n //here you can also pass className, or any other button element attributes\n style: {\n alignSelf: 'center',\n background: 'black',\n border: 'none',\n borderRadius: '50%',\n color: 'white',\n cursor: 'pointer',\n fontSize: '20px',\n height: 30,\n lineHeight: 1,\n textAlign: 'center',\n width: 30,\n },\n children: \u003cspan\u003e{`\u003e`}\u003c/span\u003e,\n }}\n backwardBtnProps={{\n //here you can also pass className, or any other button element attributes\n style: {\n alignSelf: 'center',\n background: 'black',\n border: 'none',\n borderRadius: '50%',\n color: 'white',\n cursor: 'pointer',\n fontSize: '20px',\n height: 30,\n lineHeight: 1,\n textAlign: 'center',\n width: 30,\n },\n children: \u003cspan\u003e{`\u003c`}\u003c/span\u003e,\n }}\n responsiveProps={[\n {\n itemsToShow: 2,\n itemsToScroll: 2,\n minWidth: 768,\n },\n ]}\n speed={400}\n easing=\"linear\"\n \u003e\n {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}\n \u003cdiv style={{ width: 300, height: 300, background: '#ff80ed' }}\u003e\n slide 0\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#065535' }}\u003e\n slide 1\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#000000' }}\u003e\n slide 2\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#133337' }}\u003e\n slide 3\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#ffc0cb' }}\u003e\n slide 4\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#ffffff' }}\u003e\n slide 5\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#ffe4e1' }}\u003e\n slide 6\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#008080' }}\u003e\n slide 7\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#ff0000' }}\u003e\n slide 8\n \u003c/div\u003e\n \u003cdiv style={{ width: 300, height: 300, background: '#e6e6fa' }}\u003e\n slide 9\n \u003c/div\u003e\n \u003c/ReactSimplyCarousel\u003e\n \u003c/div\u003e\n );\n}\n\nexport default ReactSimplyCarouselExample;\n```\n\n## Props\n\n| Name | Type | Default Value | Description |\n| ----------------------------------------------------------------- | ------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **activeSlideIndex** | number | | Index of active slide |\n| **activeSlideProps** | object | `{}` | DOM props for active slide element |\n| **autoplay** | boolean | `false` | |\n| **autoplayDirection** | string (`'forward'` or `'backward'`) | `'forward'` | |\n| **backwardBtnProps** | object | `{}` | DOM props for carousel backward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |\n| **children** | node | `null` | slides array |\n| **containerProps** | object | `{}` | DOM props for carousel container div element |\n| **delay** | number | `0` | Slide change delay (css transition delay) in ms |\n| **disableNavIfAllVisible** | boolean | `true` | Disable carousel nav if all slides is visible |\n| **easing** | string | `'linear'` | Slide change easing (css transition easing) |\n| **forwardBtnProps** | object | `{}` | DOM props for carousel forward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |\n| **hideNavIfAllVisible** | boolean | `true` | Hide nav buttons if all slides is visible |\n| **innerProps** | object | `{}` | DOM props for inner div element |\n| **itemsListProps** | object | `{}` | DOM props for items list div element |\n| **itemsToScroll** | number | `1` | How many slides to scroll at once |\n| **itemsToShow** | number | `0` (automaticaly calculated) | How many slides to show |\n| **onAfterChange** | function | `null` | activeSlideIndex change callback |\n| **onRequestChange** | function | | Callback to handle every time the active slide changes, receives the new active index as first argument and info about visible slides (`{`\u003cbr /\u003e ` isFirstSlideVisible: boolean;`\u003cbr /\u003e`isLastSlideVisible: boolean;`\u003cbr /\u003e`visibleSlides: { slideIndex: number; isFullyVisible: boolean }[];`\u003cbr /\u003e`}`) as second. |\n| **responsiveProps** | Array of objects | `[]` | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is \u003e= 768px and \u003c 992px |\n| **speed** | number | `0` | Carousel scroll speed (css transition speed) in ms |\n| **updateOnItemClick** | boolean | `false` | Update active item index after click on some slide |\n| **centerMode** (disabled if `infinite` prop disabled) | boolean | `false` | Align active slide to the center of the carousel container viewport |\n| **infinite** | boolean | `true` | Enable infinite loop scroll |\n| **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean | `true` | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible |\n| **disableNavIfEdgeActive** | boolean | `true` | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0 |\n| **dotsNav** (experimental) | object | `{}` | Props for carousel dots. Includes `show` (boolean) property for toggle dots nav visibility, `containerProps` (DOM Props for dots nav wrapper div) property, `itemBtnProps` (DOM props for all dots nav buttons) property and `activeItemBtnProps` (DOM props for active dots nav button) |\n| **persistentChangeCallbacks** | boolean | `false` | Enable call `onRequestChange` prop even if activeSlideIndex equals new value |\n| **showSlidesBeforeInit** (deprecated) | boolean | `true` | Show slides on very first (initial) carousel render |\n| **visibleSlideProps** | object | `{}` | DOM props for visible slide element |\n| **autoplayDelay** | number | `0` | after what period of time the auto-update function of the active slide will be launched |\n| **preventScrollOnSwipe** | boolean | `false` | prevent vertical scroll on swipe |\n| **disableSwipeByMouse** | boolean | `false` | disable swipe by mouse |\n| **disableSwipeByTouch** | boolean | `false` | disable swipe by touch |\n| **swipeTreshold** | number | half width of the active slide | minimum swipe distance in px (by touch or by mouse drag) for change slide |\n| **touchSwipeTreshold** | number | half width of the active slide | minimum swipe distance in px (by touch) for change slide |\n| **mouseSwipeTreshold** | number | half width of the active slide | minimum swipe distance in px (by mouse drag) for change slide |\n| **swipeRatio** | number | `1` | swipe distance ratio (on swipe by touchmove or by mouse drag) |\n| **touchSwipeRatio** | number | `swipeRatio` prop value | swipe distance ratio (on swipe by touchmove) |\n| **mouseSwipeRatio** | number | `swipeRatio` prop value | swipe distance ratio (on swipe by mouse drag) |\n| **dirRTL** | boolean | `false` | Enable support for right-to-left slides content (text) direction |\n\n## Demo\n\n[![Edit react-simply-carousel-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k0fxi?fontsize=14)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadymshymko%2Freact-simply-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadymshymko%2Freact-simply-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadymshymko%2Freact-simply-carousel/lists"}