Skip to content

Latest commit

 

History

History
64 lines (40 loc) · 3.46 KB

README.md

File metadata and controls

64 lines (40 loc) · 3.46 KB
Raw

License Published on webcomponents.org Travis

<image-carousel>

It's a carousel element for Polymer 2.0.

Installation

  bower i --save image-carousel

Example

<image-carousel aria-label="example carousel">
  <template 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&pid=1.12&eid=G.470633631"]' slot="images">
    <img src="[[item]]" class="scrolling-images" alt$="demo image alt [[index]]" width="100%" height="374px">
  </template>
</image-carousel>

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.
// 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 or aria-labelledby to image-carousel.

Web Accessibility

Web accessibility refers to practice of making web easily usable/accessible for people with disabilities. Here 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 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. You can also look at some of there examples. If you like you can also follow these 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