How to disable swiping in ionic2 <ion-slides>

Ionic Framework ionic-v3
1

Hi,

I’m trying to disable gesture swiping on ionic2 slides, but I can’t figure how to do it.
I’m using javascript.

Thanks in advance

1 Like
2

Did you find a solution? I want to dynamically allow or block swiping.

I tried:

this.slider['noSwiping'] = true

or

this.extraOptions.noSwiping = true

No success.

3

Hi,

sorry for late response.
Using Ionic2 Javascript I made it this way:

View:
<ion-slides [options]="options" #slides>

On Js file:

constructor(nav) {
    this.nav = nav;
    this.options = {
      onInit: function (slides) {
        //slides.lockSwipes();
        //slides.unlockSwipes();
      }
    }
  }

Use lock or unlock functions.
There are other methods to switch to specific slide, or next and previous. You can simply attach the slides object to a variable and use it anywhere.

4

Hi @ahlidap, when i use lockSwipes(), slideNext() method is also not working. I want to my slider to slide only on button click. I tried using onlyEnternal option described in swiper. But slider is sliding on swipe. Any other option or am i missing anything. Please help.

5

Things may have changed a little due to ionic / angular updates (my solutions worked on a earlier stage using JS syntax).

Have you checked documentation for your ionic/angular versions?

6

I checked and now i am locking and unlocking swipes everytime to achieve my requirement. :slight_smile:

7

you can use the swiper api to do this.

in your html:

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

in yout .ts file:

sliderOptions = {
pager: true,
onlyExternal: true
}

this way you can only control the slides with code and swipe is disabled!

check out the api here: Swiper API

1 Like
8

@fishgrind, this method didnt work for me. Locking and unlocking swipes while navigation worked :slight_smile:

9

hmm strange, just tested it on 2.0.0 beta 11 and works fine for me!

are you putting your options right after exporting your class:

export class Home {

sliderOptions = {
pager: true,
onlyExternal: true
}

}

I noticed if i set the options from a function it doesn’t work for me either

10

you are absolutely right. defining options before constructor works perfect. I was declaring it inside constructor. Thanks for your help :slight_smile:

11

glad i could help :slight_smile:

now most of the api functions, if not all should work for you!

1 Like
12

This is working ! thanks a lot

1 Like
13

class=“swiper-no-swiping”

14