{"id":15022353,"url":"https://github.com/technikhil314/carousel-web-component","last_synced_at":"2025-09-25T13:28:25.960Z","repository":{"id":39068643,"uuid":"276163764","full_name":"technikhil314/carousel-web-component","owner":"technikhil314","description":"A tiny(~1.2Kb), framework agnostic, light weight, zero dependancy, touch friendly carousel component","archived":false,"fork":false,"pushed_at":"2023-03-05T04:13:38.000Z","size":2530,"stargazers_count":2,"open_issues_count":24,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T21:02:54.412Z","etag":null,"topics":["carousel","slides","webcomponent","webcomponents"],"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/technikhil314.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":"2020-06-30T17:16:41.000Z","updated_at":"2023-03-08T16:02:18.000Z","dependencies_parsed_at":"2024-09-16T12:23:22.679Z","dependency_job_id":"bf671456-ba36-4f15-84e3-5a79b7290be5","html_url":"https://github.com/technikhil314/carousel-web-component","commit_stats":{"total_commits":77,"total_committers":3,"mean_commits":"25.666666666666668","dds":"0.11688311688311692","last_synced_commit":"61bcee5a11efc5fa1c54c3c1241a4da02304953d"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technikhil314%2Fcarousel-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technikhil314%2Fcarousel-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technikhil314%2Fcarousel-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technikhil314%2Fcarousel-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/technikhil314","download_url":"https://codeload.github.com/technikhil314/carousel-web-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843707,"owners_count":19375191,"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","slides","webcomponent","webcomponents"],"created_at":"2024-09-24T19:57:49.958Z","updated_at":"2025-09-25T13:28:25.863Z","avatar_url":"https://github.com/technikhil314.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/technikhil314","https://paypal.me/technikhil314"],"categories":[],"sub_categories":[],"readme":"# Carousel Web Component\n\n[//]: \u003c\u003e (start placeholder for auto-badger)\n\n[![Build Status](https://img.shields.io/travis/technikhil314/carousel-web-component.svg?style=flat-square\u0026color=%23007a1f)](https://travis-ci.org/technikhil314/carousel-web-component)\n[![version](https://img.shields.io/npm/v/carousel-webcomponent.svg?style=flat-square)](https://npmjs.org/carousel-webcomponent)\n[![min size](https://img.shields.io/bundlephobia/min/carousel-webcomponent)](https://bundlephobia.com/result?p=carousel-webcomponent)\n[![mingzip size](https://img.shields.io/bundlephobia/minzip/carousel-webcomponent)](https://bundlephobia.com/result?p=carousel-webcomponent)\n[![license](https://img.shields.io/npm/l/carousel-webcomponent?color=%23007a1f)](https://github.com/technikhil314/carousel-web-component/blob/master/LICENSE)\n\n[![dependancies](https://img.shields.io/librariesio/release/npm/carousel-webcomponent?color=%23007a1f)](https://libraries.io/npm/carousel-webcomponent)\n[![downloads](https://img.shields.io/npm/dm/carousel-webcomponent)](https://npmcharts.com/compare/carousel-webcomponent)\n[![all contributors](https://img.shields.io/github/all-contributors/technikhil314/carousel-web-component)](https://github.com/technikhil314/carousel-web-component/graphs/contributors)\n[![code of conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/technikhil314/carousel-web-component/blob/master/CODE_OF_CONDUCT.md)\n[![chat with community](https://img.shields.io/gitter/room/technikhil314/carousel-web-component?color=%23007a1f)](https://gitter.im/carousel-web-component)\n\n[![stargazers](https://img.shields.io/github/stars/technikhil314/carousel-web-component?style=social)](https://github.com/technikhil314/carousel-web-component/stargazers)\n[![number of forks](https://img.shields.io/github/forks/technikhil314/carousel-web-component?style=social)](https://github.com/technikhil314/carousel-web-component/fork)\n[![Follow technikhil314 on twiter](https://img.shields.io/twitter/follow/technikhil314?label=Follow)](https://www.twitter.com/technikhil314)\n\n:clap: \u0026 :heart: to [auto badger](https://github.com/technikhil314/auto-badger) for making badging simple\n\n[//]: \u003c\u003e (end placeholder for auto-badger)\n\n#### **A tiny(1.2Kb), framework agnostic, light weight, zero dependancy, touch friendly carousel component**\n\n## Why?\n\nMost of the carousel components out there do not leverage latest css and javascript features like css scroll snap, flex order and webcomponents etc. Using these features makes carousel much more eligent, reliable, light weight and framework agnostic\n\n## Disclaimers\n\n- This is still a WIP. Feel free to contribute.\n\n- This is a webcomponent make sure you are not running on old browsers (by that I mostly mean Internet exploer). If you want to use it in old browser that do not support webcomponents please include [webcomponent polyfill from here](https://www.webcomponents.org/polyfills)\n\n- This package is ideal and best suitable for static sites. The support for dynamic content on carousel is in roadmap\n\n## Browser campatibility\n\n| ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)    | ![Mobile](https://developer.mozilla.org/static/platforms/mobile.d9737f9e22aa.svg)              | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)       | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)                                                   | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg) | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)    | ![Mobile](https://developer.mozilla.org/static/platforms/mobile.d9737f9e22aa.svg)          | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)         |\n| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |\n| ![Chrome](https://raw.github.com/alrra/browser-logos/main/src/chrome/chrome_32x32.png) | ![Android Chrome](https://raw.github.com/alrra/browser-logos/main/src/chrome/chrome_32x32.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/main/src/firefox/firefox_32x32.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/main/src/archive/internet-explorer_9-11/internet-explorer_9-11_32x32.png) | ![Opera](https://raw.github.com/alrra/browser-logos/main/src/opera/opera_32x32.png) | ![Safari](https://raw.github.com/alrra/browser-logos/main/src/safari/safari_32x32.png) | ![Ios Safari](https://raw.github.com/alrra/browser-logos/main/src/safari/safari_32x32.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_32x32.png) |\n| 69+ :heavy_check_mark:                                                                 | 81+ :heavy_check_mark:                                                                         | 68+ :heavy_check_mark:                                                                    | Polyfill :heavy_check_mark:                                                                                                           | 64+ :heavy_check_mark:                                                              | 11+ :heavy_check_mark:                                                                 | 11+ :heavy_check_mark:                                                                     | 79+ :heavy_check_mark:                                                                      |\n\n## Documentation / How to use / Options / Customization\n\nThe documentation is [hosted here](https://technikhil314.netlify.app/docs/carousel/introduction)\n\n## If you liked my work, show some :heart: :star: the repo.\n\nAlso you can appreciate by\n\n\u003cp\u003e\n  \u003ctable style=\"border-spacing: 5px 10px;\"\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.buymeacoffee.com/technikhil314\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" style=\"max-width:90%;\" width=\"180\"\u003e\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://paypal.me/technikhil314\"\u003e\u003cimg src=\"https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png\" alt=\"PayPal Logo\" style=\"max-width:90%;\" width=\"180\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n\n  \u003c/table\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechnikhil314%2Fcarousel-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechnikhil314%2Fcarousel-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechnikhil314%2Fcarousel-web-component/lists"}