Demo and API docs

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);
}