Ionic 2 Slides LOCK

Viewed 3496

I would like to lock the sliding feature (by swiping the screen) it should only work when i click the button.

Since im pretty new to typescript i can't explain how i should get this to work. I found some docs on the ionic page.

"lockSwipes(shouldLockSwipes)" I think this is the code i need but i have no clue how i can include it into my IonicApp.

HTML

<ion-slide>
  <ion-item>
    <img src="img/question.png (click)="goToSlide1()">
  </ion-item>
</ion-slide>

<ion-slide>
  <ion-item>
    <img src="img/clue.png (click)="goToSlide2()">
  </ion-item>
</ion-slide>

<ion-slide>
  <ion-item>
    <img src="img/answer.png (click)="Finish()">
  </ion-item>
</ion-slide>

TS

        import {Component} from '@angular/core';
        import {NavController} from 'ionic-angular';
        import {Finish} from '../finish/finish';
        import { Slides } from 'ionic-angular';
        import { ViewChild } from '@angular/core';


        @Component({
            templateUrl: 'build/pages/slider/slider.html'
        })
        export class Slider {
            @ViewChild(Slides) slides: Slides;
            value = '';
            changeText(value: string) { this.value = value; }
            constructor(private navController: NavController) {

            goToSlide1() {
                this.slides.slideTo(1, 500);
            }
            goToSlide2() {
                this.slides.slideTo(2, 500);
            }
            goToFinish() {
                this.navController.setRoot(Finish);
            }
    }
}

I hope someone can help me out! Thanks.

3 Answers

add this into ionViewDidLoad function

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