Angularjs support

I’ve begun integrating Swipe into Angular.js. The integration works well so far and does not touch the original swipe.js file, but there are limitations in simply wrapping the library.

There are 3 main directives:

• swipe-wrap: initializes the Swipe controller and thus will contain all the Swipe-related model/logic. Additional components (directives) may added within this wrapper, such as a counter or a controls directive;
• swipe-slider: the actual slider;
• swipe-item: a slide, which contains the client’s html.

The swipe-wrap must be a parent of the swipe-slider, because the latter transcludes, thus creating a new, isolated scope that inherits from the $parent scope. Therefore, in order for the model to propagate correctly, the swipe-wrap must be parent of the slider.

All the Swipe options are supported. However, since the original swipe.js is untouched, I must create a new callback function which includes $scope.$apply() AND the client callback in order for every slide change to be added to the event loop. (otherwise, Angularjs doesn’t know about the slide index when auto-playing the slider).

My suggestion is to port Swipe to a different core file designed for Angular.js. However, the integration I made works - just include angular.swipe.js before your custom app, given Swipe is already loaded as a global on the page.

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>

<!-- Include the following scripts in the correct order before defining your app -->
<script src="angular.js"></script>
<script src="swipe.js"></script>
<script src="angular.swipe.js"></script>

Javascript

angular
  .module('myApp', ['swipe']) // require the swipe module
  .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) {}
  };
}

[maxfahl]

This is a bit out of topic. But do you guys know of any wrapper for this slider in Angular 4?

[loup-brun]

I’ll have to make some tests with ng-repeat, since I haven’t used Swipe with that directive - though I can see how pertinent it can be.

Since wrapping the Swipe library in Angular brings some compromises, we might (just a quick thought, not yet a serious consideration) port the project to a different repository to better enable Angular support.