Swipe for AngularJS

Demo featuring Swipe support for AngularJS.

Demo

Straightforward Swipe implementation in Angular.js. Note the addition of a slide counter, which is just a simple directive nested inside the swipe-wrap directive.

0 1 2 3 4 5
Prev Next

Current slide:

This slider has {{ SwipeCtrl.getNumSlides() }} slides

Markup:

<swipe-wrap>
  <swipe-slider data-options="Demo1.sliderConfig">
    <swipe-item>...</swipe-item>
    <swipe-item>...</swipe-item>
    <swipe-item>...</swipe-item>
  </swipe-slider>
  <!-- Other slide-related directives go here -->
</swipe-wrap>

Javascript

angular
  .module('myApp', ['swipe', 'swipe.counter'])
  .controller('DemoController', DemoController);

// Attach the app onto the document body
// Alternatively, use the directive form of the bootstrap function
angular.bootstrap(document.getElementsByTagName('body')[0], ['myApp']);

function DemoController() {
  var Demo = this;
  // Add an options object to your application controller
  Demo.sliderConfig = {
    startSlide: 0,
    speed: 400,
    auto: 3000,
    draggable: false,
    continuous: true,
    disableScroll: false,
    stopPropagation: false,
    callback: function(index, elem) {},
    transitionEnd: function(index, elem) {}
  };
}