https://github.com/a1626/image-carousel
Polymer element for image carousel
https://github.com/a1626/image-carousel
css css3 html javascript polymer polymer2 shadow-dom webcomponents
Last synced: 5 months ago
JSON representation
Polymer element for image carousel
- Host: GitHub
- URL: https://github.com/a1626/image-carousel
- Owner: a1626
- License: mit
- Created: 2017-06-29T15:02:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-14T14:37:29.000Z (over 7 years ago)
- Last Synced: 2025-04-19T17:17:03.789Z (6 months ago)
- Topics: css, css3, html, javascript, polymer, polymer2, shadow-dom, webcomponents
- Language: HTML
- Homepage: https://www.webcomponents.org/element/a1626/image-carousel/elements/image-carousel
- Size: 76.2 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/a1626/image-carousel/blob/master/LICENSE)
[](https://www.webcomponents.org/element/a1626/image-carousel)
[](https://travis-ci.org/a1626/image-carousel)
# \
It's a carousel element for Polymer 2.0.
## Installation
```
bower i --save image-carousel
```
## Example
```html
```
## Usage
Please keep following points in mind while using the element
- As images will be part of `light-dom` please add property/attribute `slot="image"` to the container of the images (template in above example).
- Images should have class named `scrolling-images` (Defining the class in not necessary, just add the attribute to image element).
- 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.
```javascript
// assuming id of image-carousel element on which change needs to be done is image-carousel
this.$['image-carousel'].addEventListener('image-carousel-changed', () => {
//further action goes here
});
```
- 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.
## Web Accessibility
Web 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&ref_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&utm_medium=email&utm_campaign=issue-71) article.
Implementing 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.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## License
MIT License