{"id":24655080,"url":"https://github.com/moncydev/slider-light","last_synced_at":"2025-10-09T13:10:52.890Z","repository":{"id":253236584,"uuid":"842877478","full_name":"MoncyDev/slider-light","owner":"MoncyDev","description":"A light-weight and basic Javascript slider ","archived":false,"fork":false,"pushed_at":"2024-09-03T10:47:54.000Z","size":37,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T16:43:42.087Z","etag":null,"topics":["carousel","javascript","slider","slider-plugin","typescript"],"latest_commit_sha":null,"homepage":"","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/MoncyDev.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":"2024-08-15T09:42:10.000Z","updated_at":"2025-01-05T16:25:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"0386b9e2-cce4-4ae9-a04c-dc9a2339c47f","html_url":"https://github.com/MoncyDev/slider-light","commit_stats":null,"previous_names":["moncydev/slider-light"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MoncyDev/slider-light","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2Fslider-light","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2Fslider-light/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2Fslider-light/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2Fslider-light/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoncyDev","download_url":"https://codeload.github.com/MoncyDev/slider-light/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2Fslider-light/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001543,"owners_count":26083102,"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-10-09T02:00:07.460Z","response_time":59,"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","javascript","slider","slider-plugin","typescript"],"created_at":"2025-01-25T22:36:04.524Z","updated_at":"2025-10-09T13:10:52.872Z","avatar_url":"https://github.com/MoncyDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slider Light\r\n\r\n![npm version](https://img.shields.io/npm/v/sliderlight.svg)\r\n![license](https://img.shields.io/github/license/MoncyDev/slider-light)\r\n![downloads](https://img.shields.io/npm/dm/sliderlight.svg)\r\n\r\nSliderlight is a light-weight and basic JavaScript slider library which enables developers to easily create sliders which has features like navigation, pagination, touch-slider, drag-slider, slidesPerView and more.\r\n\r\n## Installation\r\n\r\n### Install from NPM\r\n\r\nWe can install SliderLight using npm:\r\n\r\n```bash\r\nnpm install sliderlight\r\n```\r\n\r\n```javascript\r\nimport SliderLight from \"sliderlight\";\r\n// import SliderLight styles\r\nimport \"sliderlight/css\";\r\n```\r\n\r\n### Using CDN\r\n\r\nYou can directly use SliderLight in your ptoject using a CDN link\r\n\r\n```html\r\n\u003clink\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/sliderlight@1/dist/sliderlight.min.css\"\r\n/\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/sliderlight@1/dist/sliderlight-bundle.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nGit Repository: https://github.com/MoncyDev/slider-light/\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst slider = new sliderLight(container, SliderOptions); // All slider options are optional\r\n```\r\n\r\nHere’s a basic example of how to use Slider-Light:\r\n\r\n```javascript\r\nconst slider = new SliderLight(\".slider-container\", {\r\n  //SliderOptions{}\r\n  prevButton: \".prev-slider-light\",\r\n  nextButton: \".next-slider-light\",\r\n  autoplay: 3000,\r\n  transition: 500,\r\n  margin: 20,\r\n  slidesPerView: 1,\r\n  pagination: \".slider-light-pagination\",\r\n  breakpoints: {\r\n    // window width is \u003e= 400px\r\n    400: {\r\n      slidesPerView: 2,\r\n      margin: 10,\r\n    },\r\n    // window width is \u003e= 700px\r\n    700: {\r\n      slidesPerView: 3,\r\n      margin: 20,\r\n    },\r\n    // window width is \u003e= 1024px\r\n    1024: {\r\n      slidesPerView: 4,\r\n      margin: 30,\r\n    },\r\n  },\r\n});\r\n```\r\n\r\n### HTML :\r\n\r\n```html\r\n\u003cdiv className=\"slider-container\"\u003e\r\n  \u003cdiv className=\"slider-light\"\u003eSlide 1\u003c/div\u003e\r\n  \u003cdiv className=\"slider-light\"\u003eSlide 2\u003c/div\u003e\r\n  \u003cdiv className=\"slider-light\"\u003eSlide 3\u003c/div\u003e\r\n  \u003cdiv className=\"prev-slider-light\"\u003e\u003c/div\u003e\r\n  \u003cdiv className=\"next-slider-light\"\u003e\u003c/div\u003e\r\n  \u003cdiv className=\"slider-light-pagination\"\u003e\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Basic Css: (optional)\r\n\r\n```css\r\n.slider-light {\r\n  display: flex;\r\n  text-align: center;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: white;\r\n  border-radius: 30px;\r\n  color: black;\r\n  height: 300px;\r\n}\r\n.slider-container {\r\n  width: 90%;\r\n  margin: 20px auto;\r\n}\r\n```\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoncydev%2Fslider-light","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoncydev%2Fslider-light","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoncydev%2Fslider-light/lists"}