{"id":23058685,"url":"https://github.com/suhdev/react-carousel","last_synced_at":"2025-10-10T04:07:17.956Z","repository":{"id":57357496,"uuid":"61383597","full_name":"suhdev/react-carousel","owner":"suhdev","description":"A responsive carousel component for ReactJS application written in TypeScript. ","archived":false,"fork":false,"pushed_at":"2016-06-25T04:20:56.000Z","size":268,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T15:54:04.502Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/suhdev.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}},"created_at":"2016-06-17T15:26:24.000Z","updated_at":"2016-06-18T01:55:27.000Z","dependencies_parsed_at":"2022-09-26T16:32:55.969Z","dependency_job_id":null,"html_url":"https://github.com/suhdev/react-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/suhdev/react-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suhdev","download_url":"https://codeload.github.com/suhdev/react-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270467648,"owners_count":24588806,"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","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"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":[],"created_at":"2024-12-16T02:17:07.023Z","updated_at":"2025-10-10T04:07:12.916Z","avatar_url":"https://github.com/suhdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#react-carousel\n\nA ReactJS Carousel component written in TypeScript. \n\n##Available Properties\n1. `items`\nThe items to show on the carousel. Each item is an object that must include the following two properties: `key` and `label`. \n2. `selIndex`\nThe item of the currently selected item. \n3. `prevButton`\nA `React.ReactElement` to be used as the previous button.\n4. `nextButton`\nA `React.ReactElement` to be used as the next button. \n5. `onItemClick`\nA function to be called when a carousel item is clicked. \n6. `minItemWidth`\nThe minimum width of the carousel items. \n7. `width` \nThe width of the carousel component excluding the next/button width. \n8. `buttonWidth`\nAn optional parameter used to set the width of the next/prev buttons. Defaults to 42.\n9. `gutter`\nAn optional parameter used to set the gutter between carousel items, defaults to 0. Note: this parameter will not actually set the gutter between items, please use CSS to do so. \nIt is mainly to account for the gutter when calculating widths of the carousel items.\n10. `className`\nAn optional parameter used to set an extra class for the carousel component root element. Defaults to \"\"  \n11. `itemRenderer`\nAn optional callback function to override the carousel's item rendering. The callback will receive an item definition `{label:string,key:string}`, the item index, and the itemOnClick function,\nthe function should return `React.ReactElement\u003cany\u003e` that represent that specific item.     \n\n##Styling\n1. Component CSS selector `.react-carousel`\n2. Carousel item CSS selector `.rc-item` \n3. Carousel buttons CSS selector `.rc-btn`, prev -\u003e `.rc-btn.prev`, next -\u003e `.rc-btn.next`\n4. Carousel viewport CSS selector `.rc-viewport`\n5. Carousel viewport wrapper CSS selector `.rc-viewport-wrapper`\n\n##Usage\n\n###HTML file\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e...\u003c/head\u003e\n    \u003cbody\u003e\n        ....\n        \u003cdiv id=\"ComponentContainer\"\u003e\u003c/div\u003e\n        ....\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n###TypeScript/JavaScript (ES6) \n\n```typescript\n//main.ts | main.js\nimport * as ReactDOM from 'react-dom'; \nimport * as React from 'react';\nimport {ReactCarousel} from 'react-carousel'; \nlet items = [0,1,2,3,4].map((e)=\u003e{\n    return {\n        label:e+'',\n        key:e+''\n    };\n}); \nlet comp = ReactDOM.render((\u003cReactCarousel \n    items={items} \n    selIndex={0} \n    prevButton={(\u003cspan\u003ePrev\u003c/span\u003e)}\n    nextButton={(\u003cspan\u003eNext\u003c/span\u003e)}\n    onItemClick={(idx:number,key:string)=\u003e{console.log(idx);console.log(key);}}\n    minItemWidth={80}\n    gutter={4}\n    buttonWidth={42}\n    width={400} /\u003e),document.getElementById('ComponentContainer'));\n```\n\n2. JavaScript  (ES6) with CommonJS modules\n\n```javascript\n//main.js\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar ReactCarousel = require('react-carousel');  \nvar items = [0,1,2,3,4].map((e)=\u003e{\n    return {\n        label:e+'',\n        key:e+''\n    };\n}); \nvar comp = ReactDOM.render((\u003cReactCarousel \n    items={items} \n    selIndex={0} \n    prevButton={(\u003cspan\u003ePrev\u003c/span\u003e)}\n    nextButton={(\u003cspan\u003eNext\u003c/span\u003e)}\n    onItemClick={(idx:number,key:string)=\u003e{console.log(idx);console.log(key);}}\n    minItemWidth={80}\n    gutter={4}\n    buttonWidth={42}\n    width={400} /\u003e),document.getElementById('ComponentContainer'));\n```\n\n\n##Usage with JSPM\n```\nimport {ReactCarousel} from 'sh-react-carousel'; \nimport * as React from 'react'; \nimport * as ReactDOM from 'react-dom'; \n\nReactDOM.render((\u003cReactCarousel \n    items={items} \n    selIndex={0} \n    prevButton={(\u003cspan\u003ePrev\u003c/span\u003e)}\n    nextButton={(\u003cspan\u003eNext\u003c/span\u003e)}\n    onItemClick={(idx:number,key:string)=\u003e{console.log(idx);console.log(key);}}\n    minItemWidth={80}\n    gutter={4}\n    buttonWidth={42}\n    width={400} /\u003e),document.getElementById('ComponentContainer'));\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuhdev%2Freact-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuhdev%2Freact-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuhdev%2Freact-carousel/lists"}