Using iDangero.us Swiper inside angularjs?

1

I’m trying to use http://www.idangero.us/sliders/swiper/ inside my ionic project. I created this directive :

.directive('waitForSlider1', function ($timeout){
    return {
        link: function($scope, $element, $attrs) {
            if ($scope.$last === true) {
                $timeout(function() {
                    new Swiper('.swiper-container1',{
                      //Your options here:
                      mode:'horizontal',
                      loop: true,
                      slidesPerView: 1,
                      pagination: '.pagination1'
                    });
                });
            }
        }
    }
})

But now, I can’t get ng-click to work. Any ideas why ?

1 Like
2

Just curious, why that slider? Ionic already comes with a Slider built in

3

I tried but it did not work for my needs. I needed to be able to display 4 slides a the same time.

If only I could use ionic slider …

4

Ahh, fair enough then. Do you mind posting a codepen? I’ll do some digging in the dev tools and see whats the issue is.

You can always put a feature request in to extend the slide box’s feasters to have multiple slides at one

5

I have tried doing this as well. The issue doesnt have to do with ionic, it has to do with the guts of how idangerous swiper works. It basically takes the html container you designate for the swiper and removes it and creates all new dom elements for the finished swiper. Since this html arrives after the templates for the page were bound to scope, it ignores any angular directives you add. I did get this working at one point for a project I had so let me look at it my old code and see what I can post. I think i basically did some command to point angular at that chunk of html and forced it to add it to the current scope.

6

i do it :slight_smile: please check angularjs-idangero.us-swiper repo
this work in dynamic view in routing and have a tricky solution for mix ng-click and onSlideClick
download repo and extract it, copy angularjs-idangero.us-swiper-master to xampp htdoc(or wamp or any web server) and go to http://localhost/angularjs-idangero.us-swiper-master/#/test to see demo

7

It is an old thread but for someone looking for the same feature

I have created a directive that helps wrap the swiper library

<ks-swiper-container initial-slide="3" loop="false" show-nav-buttons="false" slides-per-view="4" space-between="5" pagination-clickable="false">
    <ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]">
        <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
    </ks-swiper-slide>
</ks-swiper-container>
1 Like
8

Thank ypu @ksachdeva !! I’m using it and I starred it in GitHub