Multiple ion-slides broken in same page on PC view

[pikotea]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
There are ion-slides A and ion-slides B in same page on PC View(ex: Desktop Chrome).
Dragging A will also cause B to move.

Steps to reproduce:

<ion-slides [ngStyle]="{height: '100px'}">
  <ion-slide>A1</ion-slide>
  <ion-slide>A2</ion-slide>
  <ion-slide>A3</ion-slide>
</ion-slides>

<ion-slides [ngStyle]="{height: '100px'}">
  <ion-slide>B1</ion-slide>
  <ion-slide>B2</ion-slide>
  <ion-slide>B3</ion-slide>
</ion-slides>

Related code:

Probably, this is the cause.
https://github.com/ionic-team/ionic/blob/master/src/components/slides/swiper/swiper-events.ts#L76

[jgw96]

Thanks for using Ionic! We will look into this.

[Ocelyn]

There is someone who as a temporary fix for that? I was hoping this bug to be fixed on the next update of Ionic but it was not the case, and my project is using some slides component on PC and I have to deliver it soon. thank you so much for your help

[jrmlt]

Probably same issue but my ion-slides are on different tabs.
Modifying the listener target by touchEventsTarget for the following lines fixed the issue for me:
https://github.com/ionic-team/ionic/blob/master/src/components/slides/swiper/swiper-events.ts#L76
https://github.com/ionic-team/ionic/blob/master/src/components/slides/swiper/swiper-events.ts#L81

if ((s.simulateTouch && !plt.is('ios') && !plt.is('android')) || (s.simulateTouch && !s._supportTouch && plt.is('ios')) || plt.getQueryParam('ionicPlatform')) {
  // mousedown
  plt.registerListener(touchEventsTarget, 'mousedown', function (ev) {
    onTouchStart(s, plt, ev);
  }, { zone: false }, unregs);
  // mousemove
  plt.registerListener(touchEventsTarget, 'mousemove', function (ev) {
    onTouchMove(s, plt, ev);
  }, { zone: false }, unregs);
  // mouseup
  plt.registerListener(touchEventsTarget, 'mouseup', function (ev) {
    onTouchEnd(s, plt, ev);
  }, { zone: false }, unregs);
 }

Don't know if this is a copy/paste typo or if there was some meaning to bind the document instead of the slides div.

[ivanmayes]

Also having this issue. Confirmed that @jrmlt's fix works for sliders on the same page on desktop. @jgw96 Is this fix an appropriate change to be merged in? Happy to submit a PR if that's the issue keeping this from going in. Thanks!

[kensodemann]

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

npm i [email protected] --save --save-exact

[ivanmayes]

@kensodemann Looks right to me!

[BehrouzSohrabi]

I had the same problem. It was an overflow issue. Sliders container overflow must be set to hidden.

[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.