Ionic 2 - how to prevent page changes on ion-slides by swipe gesture?

Question

I saw the solution in many different sources for this, including Stack Overflow. This is working for me partially: I can't swipe to the left or right to switch the pages. That's fine ! But if the user click a button , keep the button pressed and swipe, this will cause pagination. (I just testing using Android)

The solution according with many sources is that one:

<ion-slides [options]="{onlyExternal: false}">
</ion-slides>

Let me illustrate this with screenshots...

If I swipe here, nothing will happen

Now, if I hold and swipe the red button, this will cause pagination.

Answer 1

The way i do this is:

On my .ts file of the page i have a slide i do this

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class Page{
  @ViewChild(Slides) slides: Slides;

  contructor() {
    this.slides.lockSwipes(true);
  }

  nextSlide(){
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }
}

And in your HTML you call the function on a button

<button ion-button block (tap)="nextSlide()">NEXT</button>

So when the page is beeing constructed i lock the swipe, and when someone click next/back i unlock the swipe, go to next slide and lock it back.

Hope it helps

Answer 2

Since externalOnly isn't working in Ionic 4 anymore, i looked into the Swiper API documentation and saw that it changed to allowTouchMove now.

So: <ion-slides [options]="{allowTouchMove:false}"

Answer 3

Another way to achieve it is adding the swiper-no-swiping class:

Example:

<ion-slides #slides class="swiper-no-swiping">
...
</ion-slides>

Answer 4

you should use the function ionViewDidLoad() because when you put the "this.slides.lockSwipes(true);" in the constructor, the page havent load yet, try to do this.

ionViewDidLoad(){
    this.slides.lockSwipes(true);
  }