Ionic 2 Slider API - Disable swiping, only allow using buttons

Ionic Framework ionic-v3
1

Hey - I would like to only allow changing slides through only button calls,

i.e.

this.slider.slideNext();

where this.slider is

@ViewChild(‘slider’) slider: Slides;

just like in the docs.

I tried passing the parameter noSwiping: true in my options to the <ion-slides> directive, but then the slides do not transition either from swipes or the above call.

Any suggestions? Thanks!

1 Like
2

I would like to know if this is possible too.

I want to disable a slider from swiping and only be able to change the slides programatically

2 Likes
3

This is how I solved it. tl;dr made use of the events that are exposed.

template

<ion-slides #slider pager 
    (ionDrag)="onIonDrag($event)" 
    [options]="slidesOptions">

<ion-slide padding text-wrap>
      <h2>Welcome</h2>
     <button outline (click)="slideNext()">Next</button>
</ion-slide>

</ion-slides>

Component

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

...

swiper:any;
@ViewChild('slider') slider: Slides;
slidesOptions = { initialSlide: 0 }

constructor(){...}

onIonDrag(event){
    this.swiper = event;
    this.swiper.lockSwipes();
  }

slideNext(){
  if(this.swiper){
    this.swiper.unlockSwipes();
  }
  this.slider.slideNext();
}

It looks like the $event that is returned is the swiper instance…

5 Likes