ionic2 - multiple ion-slides - swiper-pagination issue

[apat183]

Short description of the problem:

When you have multiple ion-slides on one page, e.g (i have two horizontal sliders to show profile pictures) the swiper-pagination doesn't know which slides to follow. Swiping slide A moves all paginations on slide B, whereas swiping slide B doesn't move the pagination at all.

What behavior are you expecting?

Each slide list should move only their own pagination.

Sorry tried to make codepen but couldn't find anything for ionic2. Code will be messy below

<ion-navbar *navbar>
</ion-navbar>
<ion-content> 
    <ion-list >
      <ion-list-header>
        Cast
      </ion-list-header>
      <ion-slides pager>
        <ion-slide *ngIf="movie.credits.cast.length > 0">
          <ion-row>
            <ion-col width-33 *ngFor="#rel of movie.credits.cast | slice:0:3">
              <img *ngIf="rel.profile_path" src="https://image.tmdb.org/t/p/w342{{rel.profile_path}}" />
              <p class="caption-title">Role</p>
              <p class="caption">{{rel.character}}</p>
              <p class="caption-title">Actor</p>
              <p class="caption">{{rel.name}}</p>
            </ion-col>
          </ion-row>
        </ion-slide>
        <ion-slide *ngIf="movie.credits.cast.length > 3">
          <ion-row>
            <ion-col width-33 *ngFor="#rel of movie.credits.cast | slice:3:6">
              <img *ngIf="rel.profile_path" src="https://image.tmdb.org/t/p/w342{{rel.profile_path}}"  />
              <p class="caption-title">Role</p>
              <p class="caption">{{rel.character}}</p>
              <p class="caption-title">Actor</p>
              <p class="caption">{{rel.name}}</p>
            </ion-col>
          </ion-row>
        </ion-slide>
        <ion-slide *ngIf="movie.credits.cast.length > 6">
          <ion-row>
            <ion-col width-33 *ngFor="#rel of movie.credits.cast | slice:6:9">
              <img *ngIf="rel.profile_path" src="https://image.tmdb.org/t/p/w342{{rel.profile_path}}"  />
              <p class="caption-title">Role</p>
              <p class="caption">{{rel.character}}</p>
              <p class="caption-title">Actor</p>
              <p class="caption">{{rel.name}} </p>
            </ion-col>
          </ion-row>
        </ion-slide>
      </ion-slides>
    </ion-list>
    <ion-list >
      <ion-list-header>
        Crew
      </ion-list-header>
      <ion-slides pager>
        <ion-slide *ngIf="movie.credits.crew.length > 0">
          <ion-row>
            <ion-col width-33 *ngFor="#rel of movie.credits.crew | slice:0:3">
              <img *ngIf="rel.profile_path" src="https://image.tmdb.org/t/p/w342{{rel.profile_path}}" />
              <p class="caption-title">Role</p>
              <p class="caption"> {{rel.job}}</p>
              <p class="caption">{{rel.name}}</p>
            </ion-col>
          </ion-row>
        </ion-slide>
        <ion-slide *ngIf="movie.credits.crew.length > 3">
          <ion-row>
            <ion-col width-33 *ngFor="#rel of movie.credits.crew | slice:3:6">
              <img *ngIf="rel.profile_path" src="https://image.tmdb.org/t/p/w342{{rel.profile_path}}" />
              <p class="caption-title">Role</p>
              <p class="caption">{{rel.job}}</p>
              <p class="caption"> {{rel.name}} </p>
            </ion-col>
          </ion-row>
        </ion-slide>
        <ion-slide *ngIf="movie.credits.crew.length > 6">
          <ion-row>
            <ion-col width-33 *ngFor="#rel of movie.credits.crew | slice:6:9">
              <img *ngIf="rel.profile_path" src="https://image.tmdb.org/t/p/w342{{rel.profile_path}}" />
              <p class="caption-title"> Role </p>
              <p class="caption">{{rel.job}}</p>
              <p class="caption">{{rel.name}} </p>
            </ion-col>
          </ion-row>
        </ion-slide>
      </ion-slides>
    </ion-list>
</ion-content>

Other information:
GIF of issue
https://drive.google.com/open?id=0BzsOvFFIePyeOXdtV1ZMM1FETjQ

Which Ionic Version? 1.x or 2.x
2 current beta

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.4.0
Xcode version: Xcode 7.2 Build version 7C68

[brandyscarney]

Thank you for the detailed issue! This is a known issue that we plan on resolving as part of this issue: #5508 😄

[apat183]

Thanks, didn't see the prior issue.

[elineopsommer]

Is it possible that this isn't solved yet? I still have this issue

[apat183]

It was closed because there is another open issue about it. #5508

[brandyscarney]

It was fixed as part of #5508 in 2.0.0-beta.5. That issue is still open to fix the remaining tasks. 😄

https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#200-beta5-2016-04-20

[escobar5]

I'm having the exact same problem, I'm using Ionic 2.0.0-rc.0

[olivermuc]

Good workaround: just add and use your custom pagination and reference it in the swiper options.
Works like a charm, plus it gives you more control.

[CookieCookson]

@olivermuc do you have an example of this? Still getting the issue here :/

[godspeed529]

Sad to see this still not working in 3.0.1 ... :(

[akaztp]

I've found that this problem persists on V2.3.0.
I analyzed the source code and produced a (local) fix for this. The problem still exists on the latest version.
The problem is that there are "global" variables on file "swiper-event.ts" that are shared among different instances. My fix moves these global vars into the class Slides.
Seems to be working fully with my changes, tests passed. If things continue to look good, I'll make a PR.

[CookieCookson]

@akaztp - I'd love to see your fixes! It does make sense that they seem to share global variables rather than isolated within instances of Slides. Let me know if you need the PR tested out on a different project. (I have about 8 carousels on the same view and then sub-carousels on modals which all get affected)

[SantoshSah]

@akaztp , thank you for finding fix for this issue. Could you please share your fix?

[danilolr]

@olivermuc can you explain in more datails how to do this ?
@akaztp please share your fix.
Ionic team please fix this one year old issue.

[akaztp]

Submitted PR #11791

[manoj-negi]

still having issue with slide in latest version. any solution for this?

[CookieCookson]

@manoj-negi try out the changes in the PR provided by @akaztp, it fixed a lot of the problems for me.

[nidhi1612]

@akaztp hi, thank you for the solution. It worked out very well and solved the multiple slides issue. However there is one more issue i'm facing.

how to make these multiple sliders responsive for different devices by changing slideperview and spaceBetween depending on the screen size.

And also is it possible to give both the sliders on the same page different styling. one can be normal and other one can be centered. also both can have different values for slideperview and spacebetween.

Thanks in advance.

[akaztp]

@nidhi1612 I'm not using them with the cases you mention so I would have to explore and ask you more questions, but I think this thread is not the place for that. You should try stackoverflow.

[kensodemann]

Please try the following nightly build and let me know if it addresses your issue:

npm i ionic-angular@3.7.1-201710201922 --save --save-exact

[CookieCookson]

Thanks @kensodemann - I will give this a go!

[CookieCookson]

Hey @kensodemann - tried it out on two of my projects and it works great.

I have found only one issue with it so far, with mouse events if you click and drag and release and then move the mouse cursor over another slides it triggers another slides instance. See the GIF below which can better explain - I am using a an ion-slides with two ion-slides inside it, which are in a grid side by side. The parent ion-slides gets affected too, but I have only demonstrated the two child slides affecting each other. This only happens with mouse events and not touch events (possibly because it doesn't fire hover/mouse events in touch environments!)

[bjconlan]

@kensodemann In addition to @CookieCookson 's comments I'm also having issue where it seems to reset to the 'last' slide when starting the drag (on all sliders).

[nidhi1612]

@kensodemann i am also facing both the issues mentioned by @CookieCookson and @bjconlan .
at time moving one slide triggers other slide and it moves quite randomly.
and cannot to go to the last slide at all. I mean last slide is never fully visible.

[manojbhardwaj]

ion-slide.swiper-slide.swiper-slide-active {
width: 100% !important;
}

This worked for me

[Oddisey]

@kensodemann Thank you very much for that command! I was having pretty much the exact same issue that the poster had and then I ran your install command and now both ion-slides operate independently.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.