Need help with angular-swiper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ksachdeva
199 Stars 98 Forks Apache License 2.0 61 Commits 51 Opened issues

Description

Angular directive for nolimits4web/Swiper

Services available

!
?

Need anything else?

Contributors list

# 47,330
c-plus-...
node
Keras
face-la...
22 commits
# 62,787
CSS
checkbo...
ui-rout...
Shell
12 commits
# 457,887
HTML
JavaScr...
6 commits
# 211,809
HTML
markers
Firebas...
C
3 commits
# 267,848
PHP
HTML
Shell
Nette
1 commit
# 631,568
HTML
JavaScr...
1 commit
# 519,820
Postgre...
REST AP...
TeX
HTML
1 commit
# 623,472
HTML
JavaScr...
1 commit
# 598,554
HTML
JavaScr...
1 commit

angular-swiper

Directive that wraps nolimits4web/swiper library for AngularJS. License: Apache

1 Installation

bower install angular-swiper

2 Development

npm install -g gulp
npm install
bower install

3 Usage

3.1 Requirements

Add

s to your 
html
files for angular and angular-swiper:
    

<script src="../bower_components/swiper/dist/js/swiper.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../dist/angular-swiper.js"></script>

And add

ksSwiper
as a dependency for your app:
angular.module('myApp', ['ksSwiper', ...]);

3.2 Sample Markup

Example:

html

    
        
    

3.3 Directive default values

If no attributes are given, an object with the following values will be used to initiate the swiper. It is possible to use the directive without specifying attributes.

// directive defaults
var params = {
    slidesPerView: $scope.slidesPerView || 1,
    slidesPerColumn: $scope.slidesPerColumn || 1,
    spaceBetween: $scope.spaceBetween || 0,
    direction: $scope.direction || 'horizontal',
    loop: $scope.loop || false,
    initialSlide: $scope.initialSlide || 0,
    showNavButtons: false
};

3.4 Possible Attributes

The following attributes can be used with this directive. Please see the Swiper API Documentation for more information about the type and description of parameters.

    ...

3.5 Override any parameter

This allows you to pass a javascript object that will override any swiper parameter from the Swiper API Documentation that is used initialize swiper.

Example:

html

    
      
    

3.6 Two-Way Binding of Swiper

In some situations it might be useful to access the actual swiper instance. Passing the parent scope will linked it to the model in the directive's isolated scope which is used for the swiper instance.

It can also be used to slideTo(index, speed, runCallbacks), slidePrev(runCallbacks, speed), slideNext(runCallbacks, speed) or for callback functions.

Example Template:

html

Example Controller ```javascript angular.module('swiperApp') .controller('TestCtrl', function($scope){

$scope.swiper = {};

$scope.next = function(){ $scope.swiper.slideNext(); };

}); ```

3.7 Accessing swiper object after it's created

In some situations, like when you wanna listen to swiper events, is useful to know when the swiper object is created (that occurs after all slides are created).

For that purpose is available the on-ready attribute. You can specify a function to be called when the swiper object is created. In the function you can manipulate the swiperobject, and for example, bind an event. The function must has a paramteter called swiper, refering to swiper object.

Example template

Example Controller ```javascript angular.module('swiperApp') .controller('TestCtrl', function($scope){

$scope.swiper = {};

$scope.onReadySwiper = function (swiper) {

swiper.on('slideChangeStart', function () {

console.log('slideChangeStart');

}); };

}); ```

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.