examples/touch-swipe-example.html

<!doctype html>
<html>
  <head>
    <title>Touch swipe example</title>
    <style>
      .slider { width: 100%; padding-bottom: 25%; }
      .slider img { width: 100%; }
      .wrapper { width: 1024px; margin: auto; }
      @media only screen and (max-width: 1024px) {
        .wrapper { width: 100%; margin: 0; }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div id="myslider" class="slider">
        <img src="http://placekitten.com/g/1024/256"/>
        <img src="https://picsum.photos/1024/256"/>
        <img src="https://picsum.photos/1024/256?random=1"/>
        <img src="https://picsum.photos/1024/256?random=2"/>
      </div>
      <p>This example is using the <a href="https://github.com/hammerjs/hammer.js">Hammer.js</a> lib to provide the swipe gesture support.</p>
    </div>
  </body>
  <script src="../dist/simpleslider.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <script>
    var isNext = true;
    var sliderElem = document.getElementById('myslider');
    var slider = simpleslider.getSlider({
      container: sliderElem
    });
    var manager = new Hammer.Manager(sliderElem);
    var Swipe = new Hammer.Swipe({direction: Hammer.DIRECTION_HORIZONTAL});

    manager.add(Swipe);

    manager.on('swipeleft', function() {
      if (isNext) {
        slider.reverse();
        isNext = false;
      }
      slider.next();
    });

    manager.on('swiperight', function() {
      if (!isNext) {
        slider.reverse();
        isNext = true;
      }
      slider.next();
    });
  </script>
</html>