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

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


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}"