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

In rc.0, how to use lockSwipe of Swiper object to prevent slide in first or last slide?
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”