{"id":18973565,"url":"https://github.com/anishmprasad/netslider","last_synced_at":"2025-04-19T16:37:58.374Z","repository":{"id":57310363,"uuid":"155405850","full_name":"anishmprasad/netslider","owner":"anishmprasad","description":"A netflix slider component for react applications","archived":false,"fork":false,"pushed_at":"2023-02-09T18:29:19.000Z","size":12304,"stargazers_count":14,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-19T12:37:34.256Z","etag":null,"topics":["netflix","react","slider","slider-animation","slider-component","slider-plugin"],"latest_commit_sha":null,"homepage":"https://anishmprasad.com/opensource/netslider","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anishmprasad.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-30T15:08:24.000Z","updated_at":"2024-06-03T09:29:19.000Z","dependencies_parsed_at":"2024-06-19T05:32:17.733Z","dependency_job_id":"30524c8d-4778-492f-bedf-b76bbc92a1b7","html_url":"https://github.com/anishmprasad/netslider","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fnetslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fnetslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fnetslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fnetslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anishmprasad","download_url":"https://codeload.github.com/anishmprasad/netslider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223704681,"owners_count":17188999,"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":["netflix","react","slider","slider-animation","slider-component","slider-plugin"],"created_at":"2024-11-08T15:12:31.554Z","updated_at":"2024-11-08T15:12:32.206Z","avatar_url":"https://github.com/anishmprasad.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# NetSlider\n\nAn animated slider component for React\n\n### Installation\n\n```\n\n// with npm\n$ npm install react-extensions --save\n\n// with npm\n$ npm install netslider --save\n\n// with yarn\n$ yarn add netslider\n```\n\n### Usage\n\nHere is a quick example to get you started, **it's all you need**:\n\n```jsx\nimport NetSlider from 'netslider';\nimport 'netslider/dist/styles.min.css';\nimport data from './Data.json';\nimport SliderContainer from '../lib/SliderContainer';\n\nfunction SliderTemplate(props) {\n\treturn (\n\t\t\u003cdiv className='slider-container-wrapper'\u003e\n\t\t\t\u003cSliderContainer videoModel={props.videoModel} model={props.model} /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\nexport default function NetSliderContainer(props) {\n\treturn (\n\t\t\u003cdiv className='netslider-container' style={{ overflow: 'hidden', height: '400px' }}\u003e\n\t\t\t\u003ch1 style={{ textAlign: 'center', margin: '40px 0' }}\u003eNetSlider\u003c/h1\u003e\n\t\t\t\u003cNetSlider\n\t\t\t\tclassName='netslider_title_card'\n\t\t\t\tdata={data}\n\t\t\t\tslideTemplate={props =\u003e \u003cSliderTemplate {...props} /\u003e}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n\u003e SliderContainer.js\n\n```jsx\nimport React from 'react';\n\nexport default function SliderContainer(props) {\n\treturn \u003cdiv className='slider-container-title'\u003e{props.videoModel.title}\u003c/div\u003e;\n}\n```\n\n\u003e Data.json\n\n```json\n[\n\t{\n\t\t\"evidenceData\": {\n\t\t\t\"type\": \"NONE\",\n\t\t\t\"key\": \"\"\n\t\t},\n\t\t\"id\": 80178943,\n\t\t\"image\": \"https://occ-0-2611-2186.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABZ3Qq-Hzea6WbaEEZaC2cfdLKk2FESlsZZgWY8mFM9G6_GV10UWfcQGrwBUH3shcFc02eClTihN9t0_w79mxi1y3Qxf8Ah890Et7Y7mQyqMefg3nsYO4ZCNWhX2KSRiKdwCgPtbwag.jpg\",\n\t\t\"imageHighRes\": \"https://occ-0-1009-1007.1.nflxso.net/dnm/api/v6/0DW6CdE4gYtYx8iy3aj8gs9WtXE/AAAABZkgH66DOjrC0-pNCF87xxKemsjiKFPbgx0xObXY6sLghHAS-MmThmCF-LZr2V42ed3VoScabV90v0cQHYxKZFULTwYq_sIBdA.jpg?r=2f8\",\n\t\t\"showAsARow\": {},\n\t\t\"summary\": {\n\t\t\t\"id\": 80178943,\n\t\t\t\"type\": \"show\"\n\t\t},\n\t\t\"title\": \"The Boss Baby: Back in Business\",\n\t\t\"userRating\": {\n\t\t\t\"type\": \"thumb\",\n\t\t\t\"userRating\": 0\n\t\t},\n\t\t\"watchURL\": \"/thebossbaby\",\n\t\t\"rowNum\": 2,\n\t\t\"rankNum\": 1\n\t}\n]\n```\n\nYes, it's really all you need to get started as you can see in this live and interactive demo:\n\n[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0xq2on1mwv)\n\n### Props\n\n| Name          | Type     | Required | Description                 |\n| ------------- | -------- | -------- | --------------------------- |\n| className     | `string` | `true`   | the src of image            |\n| data          | `object` | `true`   | slider data object          |\n| slideTemplate | `object` | `true`   | template for slider content |\n\n### Screenshot\n\n![Preview][screenshot]\n\n[screenshot]: https://raw.githubusercontent.com/anishmprasad/netslider/master/screenshot/Screenshot.png 'Preview screenshot'\n\n### Demo\n\n-   [anish.m.prasad.com](https://anishmprasad.com/opensource/netslider)\n-   [anishmprasad.github.io](https://anishmprasad.github.io/opensource/netslider)\n-   [codesandbox.io](https://codesandbox.io/embed/0xq2on1mwv)\n\n### TODO\n\n-   [x] Minification\n-   [x] Documentation\n-   [x] CSS Polishing and Transitions\n-   [x] Production Level\n\n### Disclaimer\n\nThis plugin is not officially commisioned/supported by Netflix.\nThe trademark \"Netflix\" is registered by \"Netflix, Inc.\"\n\n### License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Fnetslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanishmprasad%2Fnetslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Fnetslider/lists"}