Issue with loop slide


#1

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 :slight_smile:


#2

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


#3

Here it is : 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.


#4

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


#5

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.


#6

Do you found a solution?


#7

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 for more details.