Skip to content

A custom element that provides a draggable slider for touch devices.

License

Notifications You must be signed in to change notification settings

sharedlabs/touch-slider

Repository files navigation

Build Status License Published on webcomponents.org

Demo and API docs

touch-slider

touch-slider is a super simple draggable slider for touch devices.

The drag doesn't work with mouse events. IMO for desktop it's better to have some arrow handles instead.

A slide is a container where you can attach content. There is always three slides attached at the same time, so animations can occur.

When a new slide is rendered the new-slide event is fired.

Use the max attribute to set the max length of slides.

<touch-slider on-new-slide="_onNewSlide" max="[[images.length]]"></touch-slider>
...
_onNewSlide(event) {
  var slide = event.detail.slide;
  var slideIndex = event.detail.index;
  var img = document.createElement('img');

  img.setAttribute('src', this.images[slideIndex]);
  Polymer.dom(slide).appendChild(img);
}

About

A custom element that provides a draggable slider for touch devices.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages