Swiper with loop causes inconsistencies

First off, I apologize for the length, but this bug creates many issues, which I’ve described below.

The swiper plugin that Ionic uses is highly configurable and way too robust for the place in which ionic uses it (the ion-slides component). When you configure it to loop, it does so by adding 2 (or more) duplicate slides for the first and last. This is important for configuring the swiper to something like it having 5 slides, but 3 visible on the page at one time, it needs to duplicate items because you could possibly be looping AND see the looping slide exit one way but it needs to come back in on the other side.

This does not happen in ionic. The slides are built to only show one slide at a time (by default), which is exactly what I need. However, because I am looping (3 slides in this case), and swiper is more robust than the simple way in which ionic uses it, the duplicate slides are causing significant issues. The duplicate slides are created by copying the DOM of the slides being duplicated. This means that custom directives I have do not work in the duplicated slides. For instance, I have a directive on a button in slide 3 of 3. The app loads on this slide. I click it, it works. If I slide right to the next slide (back to slide 1 of 3) and then slide left (back to 3 of 3), without the user noticing, they are currently viewing the DUPLICATE slide 3 of 3. If I press the button now, it does not work. If I swipe 3 times to the right (to slide 1, 2, and then back to 3), it works again, because now I am viewing the REAL slide that was properly instantiated via angular. This applies to many other things. For instance, if you have a scroll in each slide, and you scroll the first or last and loop around so you are viewing the duplicate, it will not be scrolled. So basically, depending on which way you’ve swiped you could be viewing a duplicate or a real slide that have completely separate states.

This is already a problem for the scrolls I have in the slides (which I’ve fixed by listening on scroll and force-scrolling the duplicate slide). The bigger issue is that custom directives like the one I’ve built that listen on clicks do not work in the duplicated slides because the DOM has been copied rather than creating true angular components. This would also seriously affect loading any asynchronous data into a slide, as the slide’s contents would be copied to the duplicate slide BEFORE asynchronous data has loaded. So as you loop around you may see one slide with empty spaces where data would be and then the real slide where data has been filled.

Has this been encountered before? This is a serious problem for my app which was designed in a looping fashion. I understand the limitation that swiper is creating and why duplicates are necessary, but they are not necessary for the way ionic uses them. Because only one slide is on the screen, and two when swiping, if there are more than 2 slides, duplicates are not needed in order to create a looping effect (they can be creatively moved from left to right out of view depending on the swipe direction).

It seems the only solution may be a custom swiping component or another 3rd party component that does not use duplicates when creating loops.

1 Like

I am very curious to hear a response/solution from the Ionic crew. It seems that if the slider is taken beyond anything besides a static image, it is rendered almost useless without extensive modification.

If a user enters data in an input, that data will not be reflected on the same slide, because it is duplicated.

1 Like

The bigger issue is that custom directives like the one I’ve built that listen on clicks do not work in the duplicated slides because the DOM has been copied rather than creating true angular components.

This is true, and is affecting my app in a major way as well. Since the underlying DOM objects are being duplicated without Ionic/Angular’s knowledge, if you place a Component or Directive in a Swiper / ion-slides and enable looping, you’re basically screwed.

I recommend using only simple HTML/Javascript on things inside ion-slides, or encourage the Ionic dev team to come up with another implementation of ion-slides that doesn’t use Swiper.js (as the author is quite attached to his duplicated slides solution for looping).

Since neither of those solutions is practical for my immediate use, I have to go without using the looping feature. At least until I can afford to rewrite the content within my slides.