{"id":16701054,"url":"https://github.com/scriptex/react-round-carousel","last_synced_at":"2025-03-17T00:33:56.142Z","repository":{"id":37050166,"uuid":"368070064","full_name":"scriptex/react-round-carousel","owner":"scriptex","description":"An infinitely scrollable 3D carousel component for React","archived":false,"fork":false,"pushed_at":"2025-03-16T04:21:21.000Z","size":8440,"stargazers_count":17,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T05:21:54.842Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-round-carousel.atanas.info","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/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2021-05-17T05:49:56.000Z","updated_at":"2025-03-16T04:20:56.000Z","dependencies_parsed_at":"2023-10-17T05:13:20.589Z","dependency_job_id":"dbe0eb37-926d-444a-b6dc-02528dea8582","html_url":"https://github.com/scriptex/react-round-carousel","commit_stats":{"total_commits":620,"total_committers":5,"mean_commits":124.0,"dds":0.5096774193548388,"last_synced_commit":"ae8de09fb213eefd30117bfa0ad63912dc14d22a"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":"scriptex/initial-commit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-round-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-round-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-round-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-round-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/react-round-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243835942,"owners_count":20355611,"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":[],"created_at":"2024-10-12T18:28:08.189Z","updated_at":"2025-03-17T00:33:55.703Z","avatar_url":"https://github.com/scriptex.png","language":"TypeScript","readme":"[![Github Build](https://github.com/scriptex/react-round-carousel/workflows/Build/badge.svg)](https://github.com/scriptex/react-round-carousel/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/react-round-carousel/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/react-round-carousel\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-react-round-carousel-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/react-round-carousel/badge)](https://www.codefactor.io/repository/github/scriptex/react-round-carousel)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/react-round-carousel/README.md?pixel)](https://github.com/scriptex/react-round-carousel/)\n\n# React Round Carousel\n\n\u003e An infinitely scrollable 3D carousel component for React\n\n[![Demo](https://raw.githubusercontent.com/scriptex/react-round-carousel/master/screenshot.png)](https://react-round-carousel.atanas.info/)\n\nThis is an infinitely scrollable, touch enabled, 3D, image carousel component which can be used in a React application.\n\n## Visitor stats\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/react-round-carousel?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/react-round-carousel?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/react-round-carousel?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Code stats\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/react-round-carousel)\n![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/react-round-carousel?style=plastic)\n![GitHub language count](https://img.shields.io/github/languages/count/scriptex/react-round-carousel?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/scriptex/react-round-carousel?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/react-round-carousel?style=plastic)\n\n## Install\n\nFirst install the component using your preferred package manager:\n\n```sh\nnpm i react-round-carousel\n\n# or\n\nyarn add react-round-carousel\n```\n\n## Usage\n\nThen import the component in your application. Here is an example:\n\nThe slides (or items) should have the following shape:\n\n| Prop      | Type        | Required | Description                                       | Example                                      |\n| --------- | ----------- | -------- | ------------------------------------------------- | -------------------------------------------- |\n| `alt`     | `string`    | false    | Alternative text for the slide image              | 'This is an example alt text'                |\n| `image`   | `string`    | true     | Path or URL to an image                           | 'https://source.unsplash.com/random/210x210' |\n| `content` | `ReactNode` | true     | A ReactNode representing the content of the slide | `\u003cdiv\u003e\u003cstrong\u003eSlide Title\u003c/strong\u003e\u003c/div\u003e`    |\n\n```typescript\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { Carousel, CarouselRef, CarouselItem } from 'react-round-carousel';\n\n// Create an array of Carousel Items\nconst items: CarouselItem[] = Array(20)\n\t.fill('')\n\t.map((_: string, index: number) =\u003e ({\n\t\talt: 'A random photo',\n\t\timage: `https://picsum.photos/${210 + index}`,\n\t\tcontent: (\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003cstrong\u003eRound Carousel\u003c/strong\u003e\n\t\t\t\t\u003cspan\u003eSlide number {index + 1}\u003c/span\u003e\n\t\t\t\u003c/div\u003e\n\t\t)\n\t}));\n\nconst App = () =\u003e {\n\tconst carouselRef = React.createRef\u003cCarouselRef\u003e();\n\n\treturn \u003cCarousel ref={carouselRef} items={items} slideOnClick /\u003e;\n};\n\ncreateRoot(document.getElementById('root')!).render(\u003cApp /\u003e);\n```\n\n## Options\n\nThe component accepts the following configuration options as props:\n\n| Prop                | Type               | Required | Description                                     | Default    |\n| ------------------- | ------------------ | -------- | ----------------------------------------------- | ---------- |\n| `classNamePrefix`   | `string`           | false    | CSS classname prefix for the Carousel component | 'carousel' |\n| `items`             | `CarouselItem`     | true     | An array of `CarouselItem`s                     | []         |\n| `itemWidth`         | `number`           | false    | Width of each of the carousel items             | 210        |\n| `nextButtonContent` | `string/ReactNode` | false    | Content of the next button                      | 'Next'     |\n| `prevButtonContent` | `string/ReactNode` | false    | Content of the previous button                  | 'Previous' |\n| `showControls`      | `boolean`          | false    | Show/hide navigation controls                   | true       |\n| `slideOnClick`      | `boolean`          | false    | Slide to the clicked slide                      | false      |\n\n## Controlling from outside\n\nIt is possible to control the component from outside - for example from a parent component. In order to do so, a React Ref should be used. The `current` reference contains several methods, including:\n\n-   `next` - Slides the carousel to the next slide.\n-   `prev` - Slides the carousel to the previous slide.\n-   `getItems` - Returns an array with all items passed to the carousel.\n-   `getSelectedIndex` - Returns the active slide index of the carousel.\n-   `setSelectedIndex` - Sets the active slide index of the carousel and slides to this slide.\n\nThe [demo](https://react-round-carousel.atanas.info) shows how to use these methods.\n\n## Style\n\nIn order to achieve the layout shown in the [demo](https://react-round-carousel.atanas.info), you should add styles to your markup.\n\nThere is an already existing stylesheet which can be found in the `src` folder and can be imported:\n\n-   in your JS entrypoint\n\n```javascript\nimport 'react-round-carousel/src/index.css';\n```\n\n-   in your CSS entrypoint\n\n```css\n@import 'react-round-carousel/src/index.css';\n```\n\nIf you don't want to use the default stylesheet, you can create and use your own.\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Freact-round-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Freact-round-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Freact-round-carousel/lists"}