# Using iDangero.us Swiper inside angularjs?

**URL:** <https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724>\
**Category:** uncategorized\
**Created:** [March 10, 2014, 1:58pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724 "2014-03-10T13:58:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fred](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@Fred](https://forum.ionicframework.com/u/Fred)\
**Post date:** [March 10, 2014, 1:59pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/1 "2014-03-10T13:59:00Z")

</div>

I’m trying to use [http://www.idangero.us/sliders/swiper/](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 ?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 10, 2014, 2:26pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/2 "2014-03-10T14:26:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fred](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@Fred](https://forum.ionicframework.com/u/Fred)\
**Post date:** [March 10, 2014, 2:34pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/3 "2014-03-10T14:34:12Z")

</div>

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 …

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 10, 2014, 2:49pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/4 "2014-03-10T14:49:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chale](https://avatars.discourse-cdn.com/v4/letter/c/bc8723/32.png) [@chale](https://forum.ionicframework.com/u/chale)\
**Post date:** [July 1, 2014, 8:49pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/5 "2014-07-01T20:49:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![arastu](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@arastu](https://forum.ionicframework.com/u/arastu)\
**Post date:** [August 14, 2014, 9:33am UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/6 "2014-08-14T09:33:48Z")

</div>

i do it 🙂 please check [angularjs-idangero.us-swiper](https://github.com/arastu/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](http://localhost/angularjs-idangero.us-swiper-master/#/test) to see demo

---

<div class="post-metadata">

**Author:** ![ksachdeva](https://avatars.discourse-cdn.com/v4/letter/k/85e7bf/32.png) [@ksachdeva](https://forum.ionicframework.com/u/ksachdeva)\
**Post date:** [March 23, 2015, 10:52pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/7 "2015-03-23T22:52:04Z")

</div>

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

I have created a directive that helps wrap the swiper library

> **[ksachdeva/angular-swiper](https://github.com/ksachdeva/angular-swiper)**
>
> angular-swiper - Angular directive for nolimits4web/Swiper

```
<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>
```

---

<div class="post-metadata">

**Author:** ![sebrojas](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sebrojas](https://forum.ionicframework.com/u/sebrojas)\
**Post date:** [July 21, 2015, 11:33pm UTC](https://forum.ionicframework.com/t/using-idangero-us-swiper-inside-angularjs/1724/8 "2015-07-21T23:33:21Z")

</div>

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