ionic slider - lockSwipes(true) disables initialSlide and slideNext() methods?

user_5342949 0
Viewed 5564

Hi I'm using Ionic Slides to display todo lists and I want to disable the swipe guestures since my list items have them. Instead I want to change the slides via methods.

This is my component:

@ViewChild(Slides) slides: Slides;

days: SbCalendarDay[] = [] //this is a list of todo's of each day

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

slide(direction:string){
    if(direction === 'prev'){
        this.slides.slidePrev()
    }else{
        this.slides.slideNext()
    }
}

And my view:

<div class="sb-calendar-day">
    <ion-slides [initialSlide]="1" (ionSlideDidChange)="slideChanged($event)" (ionSlideWillChange)="slideWillChange($event)">
        <ion-slide *ngFor="let day of days">
            <sb-list [list]="day.events" (sbListEvent)="listEvent($event)"></sb-list>
        </ion-slide>
    </ion-slides>
</div>

However when I lock the swipes, the initialSlide input doesn't work anymore. I'm starting off with an array of 3 days with array[1] being the current day.

Furthermore the methods slideNext() and slidePrev() also don't react. Does lockSwipes(true) completely "lock down" the slider?

Is there a way to only disable the swiping gestures of the slider?

Thanks

ionic3 angular swipe
3 Answers

Although I am not sure how good a practice is using setTimeout. But, this hack worked for me.

setTimeout(()=> {
      this.slides.lockSwipes(true);
}, 100);

And template code:

<ion-slides (ionSlideDidChange)="slideChanged($event)" [initialSlide]="1">
user_19028310

You can use allowTouchMove Slide options to false like this :

template code :

<ion-slides [options]="slideOpts">

ts code :

slideOpts = {
allowTouchMove: false
};
user_44293270
Related