{"id":14990308,"url":"https://github.com/ciampo/macro-carousel","last_synced_at":"2025-04-12T02:06:35.834Z","repository":{"id":24595003,"uuid":"102004861","full_name":"ciampo/macro-carousel","owner":"ciampo","description":"Carousel as a Vanilla Web Component.","archived":false,"fork":false,"pushed_at":"2022-12-30T18:40:40.000Z","size":4215,"stargazers_count":77,"open_issues_count":44,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-25T21:47:38.945Z","etag":null,"topics":["carousel","web-component"],"latest_commit_sha":null,"homepage":"https://ciampo.github.io/macro-carousel/demo/","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/ciampo.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}},"created_at":"2017-08-31T13:42:13.000Z","updated_at":"2023-05-20T18:08:14.000Z","dependencies_parsed_at":"2023-01-14T01:15:45.774Z","dependency_job_id":null,"html_url":"https://github.com/ciampo/macro-carousel","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciampo%2Fmacro-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciampo%2Fmacro-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciampo%2Fmacro-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciampo%2Fmacro-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ciampo","download_url":"https://codeload.github.com/ciampo/macro-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248170201,"owners_count":21059156,"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","web-component"],"created_at":"2024-09-24T14:19:52.158Z","updated_at":"2025-04-12T02:06:35.814Z","avatar_url":"https://github.com/ciampo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003cmacro-carousel\u003e` \u0026middot; [![npm version](https://img.shields.io/npm/v/macro-carousel.svg?style=flat)](https://www.npmjs.com/package/macro-carousel) [![Build Status](https://travis-ci.org/ciampo/macro-carousel.svg?branch=master)](https://travis-ci.org/ciampo/macro-carousel) [![Coverage Status](https://coveralls.io/repos/github/ciampo/macro-carousel/badge.svg)](https://coveralls.io/github/ciampo/macro-carousel) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ciampo/macro-carousel/blob/master/LICENSE)\n\n`\u003cmacro-carousel\u003e` is a carousel (*vanilla*) Web Component.\n\n**[DEMOS](https://ciampo.github.io/macro-carousel/demo/)** | **[DOCS](https://github.com/ciampo/macro-carousel/blob/master/docs/macro-carousel.md)**\n\n- Compatible with every framework\n- Public APIs exposed as methods, events and properties/attributes\n- Mouse and touch events\n- Previous and next buttons\n- Pagination indicators\n- Multiple slides per view\n- Customisable styles though CSS custom properties\n- Focused on a11y\n- no external dependencies\n\n## Installation\n\n**`npm install --save macro-carousel`**\n\nIt is reccommended to install the [`inert`](https://github.com/WICG/inert) and [`focus-visible`](https://github.com/WICG/focus-visible) polyfills (listed as `peerDependencies`).\n\n\n### Running the project locally\n\nRun `npm install` to install all local dependencies.\n\nRun `npm start` and open the [`http://localhost:8080/demo/`](http://localhost:8080/demo/) page in your browser.\n\n## Usage\n\nPlease read the [full documentation](./docs/macro-carousel.md)\n\n```html\n\u003cmacro-carousel\u003e\n  \u003cdiv\u003eFirst slide\u003c/div\u003e\n  \u003cdiv\u003eSecond slide\u003c/div\u003e\n  \u003cdiv\u003eThird slide\u003c/div\u003e\n\u003c/macro-carousel\u003e\n\n\u003cscript src=\"macro-carousel.min.js\" defer\u003e\u003c/script\u003e\n```\n\nFor more examples, look at the demos ([Live demo](https://ciampo.github.io/macro-carousel/demo/), [Demo code](./demo/))\n\n## Browser support\n\n### WebComponent Polyfills suite\n\nIn order for this Web Component to work on all evergreen browsers, you may need to add the [WebComponent polyfills suite](https://github.com/webcomponents/webcomponentsjs) to your page. (*Please note that this repository focuses on the `macro-carousel` Web Component, and not on the polyfills*)\n\nAll the demos in this repository already make use of the polyfills (by using [`webcomponents-loader.js`](https://github.com/webcomponents/webcomponentsjs#webcomponents-loaderjs)). The source code of the `macro-carousel` Web Component also makes optional calls to the `ShadyCSS` polyfill.\n\nBecause of the [`ShadyCSS` polyfill limitations](https://github.com/webcomponents/shadycss#limitations), certain style rules are not applied in polyfilled browsers:\n\n- all the rules that rely on the `:host-context()` selector are not polyfilled correctly (these rules are mainly around using the `focus-visible` polyfill)\n- some of the more complex selectors using `:host()` are also not supported. This mainly impact the hover/focus states on navigation buttons.\n- normally, external styles have the priority over the internal Web Component styles. But sometimes, after the polyfill's transformation, some internal selectors end up having a higher specificity then the external ones. This is quite an edge case, but keep an eye for it (e.g.: the [custom navigation demo](./demo/custom-navigation.html) uses the `!important` keyword to force some styles).\n\nFor browsers not supporting ES6 classes, the tranpiled ES5 version can be used instead (`macro-carousel.es5.min.js`), together with the  [`custom-elements-es5-adapter.js`](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) polyfill. The [es5 demo](./demo/es5.html) shows how to do that.\n\nAs browser support grows and the polyfills improve, these limitations should become less and less frequent and problematic.\n\n### Other known cross-browser limitations\n\nIn order to change the color of the navigation button arrow, this project makes use of the `mask-image` CSS property. Unofruntaly, when this CSS feature is not supported, the color defined through `--macro-carousel-navigation-color-focus` is not going to be applied correctly to the arrow.\n\n## Test\n\nRun `npm test` to run all tests.\n\n## Whishlist\n\nPlease have a look at [the backlog](https://github.com/ciampo/macro-carousel/milestone/2) to see the plan for the next releases.\n\nIf you have a feature request, feel free to open an issue!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciampo%2Fmacro-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fciampo%2Fmacro-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciampo%2Fmacro-carousel/lists"}