Slides - how to disable swipe between slides (with gestures)?

Ionic Framework ionic-v3
1

Do you know any solutions? I need to allow only change slides using:
slidesId.next()

1 Like
2

You can disable swipe gestures by passing options to the slider:

<ion-slides class="slides" [options]="{onlyExternal: false}">
  <ion-slide>
    <p>First Slide</p>
  </ion-slide>
  <ion-slide>
    <p>Second Slide</p>
  </ion-slide>
</ion-slides>

Here you can find more options: http://www.idangero.us/swiper/api/

Does anyone know how to access the slider object?

4 Likes
3

Thanks for reply!

Getting access the slider object is here

1 Like
4

Not directly an answer to your use case but just in case someone is wondering. In order to disable/enable swiping of slides dynamically I had to use the following:

>     let swiperInstance = this.slider.getSlider();
>     if (shouldSwipe == true){
>       swiperInstance.unlockSwipes();`
>     } else {
>       swiperInstance.lockSwipes();
>     }

according to SwiperAPI and Slides - Ionic API

1 Like
5

lockSwipes() should do the job
this.slider.lockSwipes(true);

This how i managed the lock
next() { if (!this.editMode) { this.signupSlider.lockSwipes(false) this.signupSlider.slideNext(); this.signupSlider.lockSwipes(true) } else { this.signupSlider.slideNext(); } }

4 Likes
6

[options]=“{onlyExternal: false}”

This option didn’t work for me.

3 Likes
7

Please help me not working for me as well

1 Like
8

unexpected token. please help

9

Looking at the Swiper API, you can add the noSwipingClass to your options.

example:

scope.options = {
	loop: false,
	noSwipingClass: 'swiper-no-swiping',
	effect: 'slide',
	speed: 500
}

Assuming you’re using ionic v1, you can then just add the specified class to your ion-slide-page.

<ion-slide-page class="swiper-no-swiping">
7 Likes
10

Class works for ionic v2+ as well

5 Likes
11

<ion-slide-page class=“swiper-no-swiping”>

Work!

12

this.slides.lockSwipes(true); // this will disable the swipe in either ways
this.slides.lockSwipes(false); // this will enable the swipe in either ways

1 Like
13

Simplest answer here, works a charm, thanks!

14

How could I lock the swipe in one direction? It does not work out for me dynamically - only once I pass it to the options static…

Thanks, Olli

15

Can’t bind to ‘options’ since it isn’t a known property of ‘ion-slides’.

Use:

@ViewChild('slider') slider: Slides;
this.slider.onlyExternal = true;
16

That did the trick for me

  @ViewChild(IonSlides) slides: IonSlides;

  ngOnInit() {
    this.slides.lockSwipes(true)
  }

  next(){
    this.slides.lockSwipes(false)
    this.slides.slideNext()
    this.slides.lockSwipes(true)
  }
  
  previous(){
    this.slides.lockSwipes(false)
    this.slides.slidePrev()
    this.slides.lockSwipes(true)
  }
1 Like
17

From github Matt-Jensen’s response
The following works : <ion-slides [options]="{ allowTouchMove: false }">

3 Likes
18

Thanks @MrWhite, its to work to me

19

@ejane

class="swiper-no-swiping" works for ionic 5+ as well!