{"id":31742856,"url":"https://github.com/devsgnr/carousel","last_synced_at":"2026-05-09T05:33:06.752Z","repository":{"id":44770967,"uuid":"452033874","full_name":"devsgnr/carousel","owner":"devsgnr","description":"Lightweight \u0026 Themeable React Carousel with 500+ downloads, I kept it simple with 45 lines of logic controlling the whole package, super light weight for those situation when you just want the functionality.","archived":false,"fork":false,"pushed_at":"2022-03-12T20:49:46.000Z","size":298,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-09T11:19:57.873Z","etag":null,"topics":["carousel","carousel-component","carousel-plugin","devsgnr","devsgnr-carousel","react","react-carousel"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/devsgnr-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/devsgnr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-25T20:36:23.000Z","updated_at":"2023-08-28T13:03:52.000Z","dependencies_parsed_at":"2022-08-28T13:30:39.766Z","dependency_job_id":null,"html_url":"https://github.com/devsgnr/carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devsgnr/carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsgnr%2Fcarousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsgnr%2Fcarousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsgnr%2Fcarousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsgnr%2Fcarousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devsgnr","download_url":"https://codeload.github.com/devsgnr/carousel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsgnr%2Fcarousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32808453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","devsgnr","devsgnr-carousel","react","react-carousel"],"created_at":"2025-10-09T11:18:53.373Z","updated_at":"2026-05-09T05:33:06.719Z","avatar_url":"https://github.com/devsgnr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# devsgnr-carousel\n\n:tada: A Simple Carousel built using React, Typescript and styled-components\n\n---\n\n![npm](https://img.shields.io/npm/v/devsgnr-carousel)\n![npm bundle size](https://img.shields.io/bundlephobia/min/devsgnr-carousel)\n![npm](https://img.shields.io/npm/dw/devsgnr-carousel)\n![NPM](https://img.shields.io/npm/l/devsgnr-carousel)\n![GitHub watchers](https://img.shields.io/github/watchers/devsgnr/carousel?style=social)\n\n---\n\n## Table of Content\n\n1. [Install](#install)\n2. [Usage](#usage)\n3. [Demos](#demos)\n4. [Props](#props)\n\n## Install\n\n##### npm\n\n`npm install devsgnr-carousel`\n\n##### yarn\n\n`yarn add devsgnr-carousel`\n\n---\n\n## Usage\n\nExample with default props ~ customize props according to your needs, check [props](#props).\n\n```tsx\n...\nimport Carousel from \"devsgnr-carousel\n\nconst App = () =\u003e {\n  const pictures: string[] = [...];\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cCarousel\n        borderRadius={10}\n        timeout={5000}\n        autoPlay={true}\n        pictures={pictures}\n        height=\"400px\"\n        showThumb={false}\n        thumbnailOutlineColor=\"#000\"\n        thumbnailOutlineStyle=\"solid\"\n        thumbnailOutlineOffset={1}\n        thumbnailOutlineThickness={2}\n        showButton={true}\n        showIndicator={true}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n#### Demos\n\n- [TypeScript Demo](https://codesandbox.io/s/devsgnr-carousel-4lm2d)\n- [JavaScript Demo](https://codesandbox.io/s/devsgnr-carousel-js-dxxyf)\n\n---\n\n## Props\n\n| props                     | values                                                                                                |\n| ------------------------- | ----------------------------------------------------------------------------------------------------- |\n| autoPlay                  | `boolean`: `optional?` default `true`. set the carousel to automatically play or not                  |\n| timeout                   | `number`: `optional?` default `5000`. set the duration for each picture                               |\n| height                    | `string`: `optional?` default `\"100%\"`. set the height of the carousel                                |\n| pictures                  | `string[]`: `required` this is the pictures address                                                   |\n| showThumbs                | `boolean`: `optional?` default `false`. when set to `true` shows the image thumbnails                 |\n| showIndicators            | `boolean`: `optional?` default `true`. when set to `false` hides the indicators                       |\n| showButtons               | `boolean`: `optional?` default: `true`. when set to `false` hides buttons                             |\n| thumbnailOutlineColor     | `string`: `optional?` default `#000`. accepts `hsla`, `rgba`, `rgb`, and `hex` values                 |\n| thumbnailOutlineThickness | `number`: `optional?` default `2`. sets the thickness of the outline of the thumbnails                |\n| thumbnailOutlineStyle     | `string`: `optional?` default `\"solid\"`. accepts `\"solid\"`, `\"dashed\"`, `\"dotted\"` as values          |\n| thumbnailOutlineOffset    | `number`: `optional?` default `1`. set the offset of the outline from the thumbnail, ie. how far away |\n| borderRadius              | `number`: `optional?` default `10`. set the `border-radius` of the carousel                           |\n\n---\n\nPackage bundled using Rollup.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsgnr%2Fcarousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevsgnr%2Fcarousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsgnr%2Fcarousel/lists"}