Ionic-framework: Slides : lockSwipes() blocks slideNext()

[TomDemulierChevret]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.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:
Currently, calling the method lockSwipes() disable the possibility for the user to swipe from one slide to the other.
The issue is that it disables to programmaticallyswipe to another slide with slideNext().

Expected behavior:
The method locSwipes() should only block user interaction, not slide change from code.

Steps to reproduce:
Here is a plunker that shows the issue : http://plnkr.co/edit/t2On2LcYIrTSQQQRw7D1?p=preview

Related code:
See the plunker above.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.2
Xcode version: Not installed

[TomDemulierChevret]

I've found a workaround until these methods are correctly implemented.
The swiper doc mentions the css class "swiper-no-swiping" to use to disable user manual swiping.
It works if we had it directly on the .

Could be nice to mention it in Ionic docs since it can be usefull in quite a lot of case (especially if you use page wide slides AND a side menu).

[cozzbie]

Any word on this?

[cozzbie]

I am actually experiencing this too. Might have to settle for something in the range of the .slideTo instead of .slideNext if this isn't fixed. Lets see if that will work instead,

[cozzbie]

Apparently you could do unlock -> swipe -> lock in your code. Seems to be the only way this can work.

[TomDemulierChevret]

As stated before, just add the class "swiper-no-swiping" to the <ion-slide> element instead of using the lockSwipes() method.

This class will disable manual swiping from user and still allow you to use slideTo/slideNext methods to programmaticaly change slides.

[baumandm]

I tried the unlock -> slideNext() -> lock pattern and it doesn't appear to work as expected. Unlock works, but after locking then unlocking, slideNext() doesn't seem to work ever again. I'll try the swiper-no-swiping approach next.

[edmundo096]

Using <ion-slide class="swiper-no-swiping"> worked perfectly as a workaround.

The .lockSwipes(true) also disables Autoplay from working. If you have autoplay going and then call lockSwipes(true), it will stop sliding by itself.

This happens on v3 as well @jgw96 (not sure if you are adding v3 labels to v2 issues)

[soumak77]

This is still an issue in v3.3

[danielehrhardt]

Same Question here!!

how can we call this:

[edmundo096]

Oh, no reason to thumbs down @soumak77 comment.
It's useful to know that this is still an issue not fixed by another ticket fix, still at v3.3, 3 sub-versions later.
Seems that the Ionic Components are becoming bigger and more complex to maintain along the Ionic core project itself.

[jgerstle]

@danielehrhardt this is from the swiper documentation. It explains that that property allows you to set the "swiper-no-swiping" class if set to true (default). I'm not really sure why this needs a fix the workaround seems to be exactly how to accomplish this according to swipers docs. However, maybe Ionic should update their docs to say that this is how to handle it.

[TomDemulierChevret]

@jgerstle This issue does need a fix because adding manually a css class is NOT a good practice in this case.
This css class comes from a third-party library whose version is controlled by the user, so if Ionic choose to upgrade swiper version and this change this class, it could break our application without us knowing.

As you just said, there is a workaround.
But a proper API shouldn't need a workaround.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!