# Issue with loop slide

**URL:** <https://forum.ionicframework.com/t/issue-with-loop-slide/51791>\
**Category:** ionic-v3\
**Created:** [May 11, 2016, 6:44pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791 "2016-05-11T18:44:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elfwine](https://avatars.discourse-cdn.com/v4/letter/e/58f4c7/32.png) [@Elfwine](https://forum.ionicframework.com/u/Elfwine)\
**Post date:** [May 11, 2016, 6:44pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/1 "2016-05-11T18:44:41Z")

</div>

Actually, as a lot of issues raise the point there is a problem of slower performance because it loads the all list (I have sometimes more than 50 items). Use “virtual scroll” with slides seems difficult because Slides object use Swiper API.

I try to use loop option to create a slider that going to have as input [ngForOf] a slice of my list that change on each slide movment but the problem is that the swiper create 2 duplicated slide not responsive to data binding. It just copy past the Dom7 object of the first and the last slide on its initialization. Once the loop it’s create they never change.

Here, I manage to use the swiper.createLoop() to recreate it when I change the first and last slide of my slider. It worked wonderfully until I have ion-button in my slide (how to make stuff easily …). And here is my real problem :

When the Dom7 is copy-past to the duplicated slides, the button is not fired because there is not anymore the output (click) … So on duplicated slides there is no data binding

Maybe the solution is to reproduce the loop mode but by creating duplicated slides that use the data binding.  
I have tried to figure out how it would work and I thank to create my own directive whith a differ object attach to a a array with duplicated element at the begining and at the end and here I need some help 🙂

---

<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:** [May 12, 2016, 7:27pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/2 "2016-05-12T19:27:29Z")

</div>

Could you provide some example code showing what you’re trying? Kind of hard to help without it.

---

<div class="post-metadata">

**Author:** ![Elfwine](https://avatars.discourse-cdn.com/v4/letter/e/58f4c7/32.png) [@Elfwine](https://forum.ionicframework.com/u/Elfwine)\
**Post date:** [May 12, 2016, 8:49pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/3 "2016-05-12T20:49:27Z")

</div>

Here it is : [http://plnkr.co/edit/F1W5NqqWBNRwy6iJIRmR?p=preview](http://plnkr.co/edit/F1W5NqqWBNRwy6iJIRmR?p=preview)

I tried to reproduce the same system that I implement because I had a lot of slides. The button works on Slide object but on duplicated slide create by the Swiper API, the button doesn’t work anymore.

Here ( button on slide 3,4,5 it works but not on slide 6 …). Hope will help you to see what I’m talking about.

---

<div class="post-metadata">

**Author:** ![Checkitservices](https://avatars.discourse-cdn.com/v4/letter/c/3da27b/32.png) [@Checkitservices](https://forum.ionicframework.com/u/Checkitservices)\
**Post date:** [September 3, 2016, 8:47pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/4 "2016-09-03T20:47:25Z")

</div>

> [@Elfwine](#):
>
> I try to use loop option to create a slider that going to have as input [ngForOf] a slice of my list that change on each slide movment but the problem is that the swiper create 2 duplicated slide not responsive to data binding. It just copy past the Dom7 object of the first and the last slide on its initialization. Once the loop it’s create they never change.
> 
> Here, I manage to use the swiper.createLoop() to recreate it when I change the first and last slide of my slider.

I ran in to exactly this problem, where did you find the “swiper.createLoop()”? Can’t find it anywhere in the Swiper Docs.

---

<div class="post-metadata">

**Author:** ![WinSystems](https://avatars.discourse-cdn.com/v4/letter/w/7c8e57/32.png) [@WinSystems](https://forum.ionicframework.com/u/WinSystems)\
**Post date:** [September 5, 2016, 12:24pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/5 "2016-09-05T12:24:31Z")

</div>

In my case, I’m filling the collection that will be use in the ngFor, in the ngOnInit event. As a result the slide is filled well but the loop it is not create.

I resolve this sending to my component the collection in the navParams. That resolve the issue, I thinks it is about times in the events.

I hope this helps.

---

<div class="post-metadata">

**Author:** ![WinSystems](https://avatars.discourse-cdn.com/v4/letter/w/7c8e57/32.png) [@WinSystems](https://forum.ionicframework.com/u/WinSystems)\
**Post date:** [October 6, 2016, 4:57pm UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/6 "2016-10-06T16:57:28Z")

</div>

Do you found a solution?

---

<div class="post-metadata">

**Author:** ![dtslvr](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@dtslvr](https://forum.ionicframework.com/u/dtslvr)\
**Post date:** [December 30, 2016, 9:49am UTC](https://forum.ionicframework.com/t/issue-with-loop-slide/51791/7 "2016-12-30T09:49:43Z")

</div>

As I don’t need the event on a button, but on the whole slide, I could solve the issue with the `onTap` event. See [http://idangero.us/swiper/api](http://idangero.us/swiper/api) for more details.
