{"id":19145309,"url":"https://github.com/a1626/image-carousel","last_synced_at":"2025-05-07T01:22:09.679Z","repository":{"id":57741106,"uuid":"95789347","full_name":"a1626/image-carousel","owner":"a1626","description":"Polymer element for image carousel","archived":false,"fork":false,"pushed_at":"2018-02-14T14:37:29.000Z","size":78,"stargazers_count":8,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T17:17:03.789Z","etag":null,"topics":["css","css3","html","javascript","polymer","polymer2","shadow-dom","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/a1626/image-carousel/elements/image-carousel","language":"HTML","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/a1626.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-06-29T15:02:10.000Z","updated_at":"2021-06-28T23:23:57.000Z","dependencies_parsed_at":"2022-09-06T20:40:29.990Z","dependency_job_id":null,"html_url":"https://github.com/a1626/image-carousel","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a1626%2Fimage-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a1626%2Fimage-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a1626%2Fimage-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a1626%2Fimage-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a1626","download_url":"https://codeload.github.com/a1626/image-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252794291,"owners_count":21805173,"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":["css","css3","html","javascript","polymer","polymer2","shadow-dom","webcomponents"],"created_at":"2024-11-09T07:39:31.588Z","updated_at":"2025-05-07T01:22:09.662Z","avatar_url":"https://github.com/a1626.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![License](http://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://github.com/a1626/image-carousel/blob/master/LICENSE)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/a1626/image-carousel)\n[![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://travis-ci.org/a1626/image-carousel)\n\n\n\n# \\\u003cimage-carousel\\\u003e\n\nIt's a carousel element for Polymer 2.0.\n\n## Installation\n\n```\n  bower i --save image-carousel\n```\n\n## Example\n\n\n```html\n\u003cimage-carousel aria-label=\"example carousel\"\u003e\n  \u003ctemplate is=\"dom-repeat\" items='[\"https://c2.staticflickr.com/2/1217/4607963354_e1a8fea210_z.jpg\", \"http://www.hdwallpapery.com/static/images/1391099215267_hero2_niQ3B7S.jpg\", \"https://tse4.mm.bing.net/th?id=ORT.TH_470633631\u0026pid=1.12\u0026eid=G.470633631\"]' slot=\"images\"\u003e\n    \u003cimg src=\"[[item]]\" class=\"scrolling-images\" alt$=\"demo image alt [[index]]\" width=\"100%\" height=\"374px\"\u003e\n  \u003c/template\u003e\n\u003c/image-carousel\u003e\n```\n\n## Usage\n\nPlease keep following points in mind while using the element\n\n- As images will be part of `light-dom` please add property/attribute `slot=\"image\"` to the container of the images (template in above example).\n- Images should have class named `scrolling-images` (Defining the class in not necessary, just add the attribute to image element).\n- In case, you want to change images dynamically do call `computeNumberOfImages` function afterwards.  Carousel will fire `image-carousel-changed` event once all the changes are done. You can listen for it to do/read any further changes.\n\n\n```javascript\n// assuming id of image-carousel element on which change needs to be done is image-carousel\nthis.$['image-carousel'].addEventListener('image-carousel-changed', () =\u003e {\n  //further action goes here\n});\n```\n\n- As efforts have been made to keep this element accessible please add `alt` attribute to image tag and [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) or [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) to image-carousel.\n\n## Web Accessibility\n\nWeb accessibility refers to practice of making web easily usable/accessible for people with disabilities. [Here](https://twitter.com/captainsafia/status/871056480799162368?ref_src=twsrc%5Etfw\u0026ref_url=https%3A%2F%2Faxesslab.com%2Faccessibility-according-to-pwd%2F) is a recent twitter post where people with disability tweeted `what's the hardest thing about browsing the web`, or if you like to read accumulated version please refer to [this](https://axesslab.com/accessibility-according-to-pwd?utm_source=ponyfoo+weekly\u0026utm_medium=email\u0026utm_campaign=issue-71) article.\n\nImplementing accessibility (also known as WAI-ARIA, ARIA, a11y) in your project isn't as tough as it may look, it has been well documented by w3c and you read the documentation [here](https://www.w3.org/TR/wai-aria-1.1/#usage). You can also look at some of there [examples](https://www.w3.org/WAI/tutorials/). If you like you can also follow [these](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) video tutorials posted on youtube by @robdodson.\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa1626%2Fimage-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa1626%2Fimage-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa1626%2Fimage-carousel/lists"}