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

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

1 Like

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

Thanks for reply!

Getting access the slider object is here

1 Like

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

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(); } }

3 Likes

[options]="{onlyExternal: false}"

This option didn’t work for me.

2 Likes

Please help me not working for me as well

1 Like

unexpected token. please help

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">
6 Likes

Class works for ionic v2+ as well

5 Likes

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

Work!

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

Simplest answer here, works a charm, thanks!

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

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

Use:

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

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)
  }