{"id":18660639,"url":"https://github.com/sahilsaha7773/react-carousel-minimal","last_synced_at":"2025-04-09T22:19:35.154Z","repository":{"id":46628615,"uuid":"393293989","full_name":"sahilsaha7773/react-carousel-minimal","owner":"sahilsaha7773","description":"React.js Responsive Minimal Carousel","archived":false,"fork":false,"pushed_at":"2022-08-23T09:01:02.000Z","size":1463,"stargazers_count":89,"open_issues_count":7,"forks_count":40,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T16:26:08.109Z","etag":null,"topics":["carousel","hacktoberfest","hacktoberfest2021","react","react-component","slider"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-carousel-minimal","language":"JavaScript","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/sahilsaha7773.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-06T07:28:53.000Z","updated_at":"2024-08-22T20:16:54.000Z","dependencies_parsed_at":"2022-08-30T17:01:18.747Z","dependency_job_id":null,"html_url":"https://github.com/sahilsaha7773/react-carousel-minimal","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilsaha7773%2Freact-carousel-minimal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilsaha7773%2Freact-carousel-minimal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilsaha7773%2Freact-carousel-minimal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahilsaha7773%2Freact-carousel-minimal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sahilsaha7773","download_url":"https://codeload.github.com/sahilsaha7773/react-carousel-minimal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119552,"owners_count":21050788,"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","hacktoberfest","hacktoberfest2021","react","react-component","slider"],"created_at":"2024-11-07T07:44:33.539Z","updated_at":"2025-04-09T22:19:35.131Z","avatar_url":"https://github.com/sahilsaha7773.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Carousel Minimal\n\u003cp\u003e\n \u003ca href=\"https://www.travis-ci.com/sahilsaha7773/react-carousel-minimal\"\u003e\u003cimg src=\"https://travis-ci.com/sahilsaha7773/react-carousel-minimal.svg?branch=master\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://badge.fury.io/js/react-carousel-minimal\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-carousel-minimal.svg\" alt=\"npm version\" /\u003e\u003c/a\u003e\n \u003cimg src=\"https://img.shields.io/npm/dw/react-carousel-minimal\"/\u003e\n\u003c/p\u003e\nEasy to use, responsive and customizable carousel component for React Projects.\n\n## Installation\n`npm i react-carousel-minimal`\n\nCheck out the demo here: \n[Demo Link](http://sahilsaha.me/react-carousel-minimal-demo/)\n\n## Features\n  - Responsive\n  - Customizable\n  - Infinite loop\n  - Autoplay with custom duration\n  - Supports HTML content as caption\n  - Pause autoplay on hold with pause icon and customizations\n  - Slide number indicators\n  - Swipe to go to next slide on touch devices\n  - Custom slide background color\n  - Thumbnail slide indicators\n  - Option to hide nav buttons\n\n## Usage\n\n```js\nimport { Carousel } from 'react-carousel-minimal';\n\nfunction App() {\n const data = [\n    {\n      image: \"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/1200px-GoldenGateBridge-001.jpg\",\n      caption: `\u003cdiv\u003e\n                  San Francisco\n                  \u003cbr/\u003e\n                  Next line\n                \u003c/div\u003e`\n    },\n    {\n      image: \"https://cdn.britannica.com/s:800x450,c:crop/35/204435-138-2F2B745A/Time-lapse-hyper-lapse-Isle-Skye-Scotland.jpg\",\n      caption: \"Scotland\"\n    },\n    {\n      image: \"https://static2.tripoto.com/media/filter/tst/img/735873/TripDocument/1537686560_1537686557954.jpg\",\n      caption: \"Darjeeling\"\n    },\n    {\n      image: \"https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Palace_of_Fine_Arts_%2816794p%29.jpg/1200px-Palace_of_Fine_Arts_%2816794p%29.jpg\",\n      caption: \"San Francisco\"\n    },\n    {\n      image: \"https://i.natgeofe.com/n/f7732389-a045-402c-bf39-cb4eda39e786/scotland_travel_4x3.jpg\",\n      caption: \"Scotland\"\n    },\n    {\n      image: \"https://www.tusktravel.com/blog/wp-content/uploads/2020/07/Best-Time-to-Visit-Darjeeling-for-Honeymoon.jpg\",\n      caption: \"Darjeeling\"\n    },\n    {\n      image: \"https://www.omm.com/~/media/images/site/locations/san_francisco_780x520px.ashx\",\n      caption: \"San Francisco\"\n    },\n    {\n      image: \"https://images.ctfassets.net/bth3mlrehms2/6Ypj2Qd3m3jQk6ygmpsNAM/61d2f8cb9f939beed918971b9bc59bcd/Scotland.jpg?w=750\u0026h=422\u0026fl=progressive\u0026q=50\u0026fm=jpg\",\n      caption: \"Scotland\"\n    },\n    {\n      image: \"https://www.oyorooms.com/travel-guide/wp-content/uploads/2019/02/summer-7.jpg\",\n      caption: \"Darjeeling\"\n    }\n  ];\n\n  const captionStyle = {\n    fontSize: '2em',\n    fontWeight: 'bold',\n  }\n  const slideNumberStyle = {\n    fontSize: '20px',\n    fontWeight: 'bold',\n  }\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cdiv style={{ textAlign: \"center\" }}\u003e\n        \u003ch2\u003eReact Carousel Minimal\u003c/h2\u003e\n        \u003cp\u003eEasy to use, responsive and customizable carousel component for React Projects.\u003c/p\u003e\n        \u003cdiv style={{\n          padding: \"0 20px\"\n        }}\u003e\n          \u003cCarousel\n            data={data}\n            time={2000}\n            width=\"850px\"\n            height=\"500px\"\n            captionStyle={captionStyle}\n            radius=\"10px\"\n            slideNumber={true}\n            slideNumberStyle={slideNumberStyle}\n            captionPosition=\"bottom\"\n            automatic={true}\n            dots={true}\n            pauseIconColor=\"white\"\n            pauseIconSize=\"40px\"\n            slideBackgroundColor=\"darkgrey\"\n            slideImageFit=\"cover\"\n            thumbnails={true}\n            thumbnailWidth=\"100px\"\n            style={{\n              textAlign: \"center\",\n              maxWidth: \"850px\",\n              maxHeight: \"500px\",\n              margin: \"40px auto\",\n            }}\n          /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n```\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/35343652/128626830-f2920f94-8ca0-4f10-badc-5ba6bbae5a72.png\"/\u003e\n\u003c/div\u003e\n\n\n## Props\n|     Name       |           Value            |    Description |\n|:--------------:|:--------------------------:|:---------------|\n|   data         |           array            | Array of carousel items, \u003cbr/\u003e containg JSON elements of the form \u003cbr/\u003e{\u003cbr/\u003e  image: IMAGE_PATH,\u003cbr/\u003e caption: HTML_CAPTION\u003cbr/\u003e }|\n|   automatic    |           boolean          | Enable auto play |\n|   time         |           number           | Interval in milliseconds \u003cbr/\u003e after which it autmatically goes to \u003cbr/\u003e the next slide if `automatic` is `true`,\u003cbr/\u003e defaults to `2000`|\n| width          |           string           | Width of the Carousel, eg: `600px` |\n| height          |           string           | Width of the Carousel, eg: `400px` |\n| slideNumber    |       boolean              | Enable slide number indicators    |\n| captionStyle   |       JSON                  | React style object for the captions |\n| radius         |      string                | Border radius of the slides, eg: `10px` |\n| slideNumberStyle |    JSON                 | React style object for slide number indicators |\n| captionPosition |     string               | Position of the text captions, available options:\u003cbr/\u003e `top, center, bottom`|\n| dots            | boolean                  | Enable slide indicator dots |\n| pauseIconColor  | string                   | Color of the pause icon, eg: `white`|\n| pauseIconSize   | string                   | size of the pause icon, eg: `40px`|\n| slideBackgroundColor | string              | Sets the slides' background color, eg: `darkgrey`|\n| slideImageFit        | string              | Sets the `object-fit` of the slides' image,\u003cbr/\u003eavailable options `contain` and `cover`|\n| thumbnails          | boolean              | Enables thumbnail indicators |\n| thumbnailWidth      | string               | Width of the thumbnail, defaults to `100px`|\n| showNavBtn          | boolean              | Hide or show nav buttons, set to `true` by default |\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahilsaha7773%2Freact-carousel-minimal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsahilsaha7773%2Freact-carousel-minimal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahilsaha7773%2Freact-carousel-minimal/lists"}