Ionic 2 Slides methods are not working (getSlider(), slideNext(), slidePrev()) [beta 11]

[Perroquiet]

Short description of the problem:

Ionic 2 Slides methods are not working. slideNext(), slidePrev(), getSlider()

import { NavController, Slides } from 'ionic-angular';
import { Component, ViewChild } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  @ViewChild('mySlider') slider: Slides;

  constructor(private nav: NavController) {

    }

  ionViewDidEnter() {
   console.log(this.slider);
   console.log(this.slider.getSlider());
  }

  slideToNext() {
    //this.slider.getSlider().slideNext(); // also not working
    this.slider.slideNext(); // not working
  }

  slideToPrev() {
    this.slider.getSlider().slidePrev(); // not working
    // this.slider.slidePrev(); // also not working
  }

Which Ionic Version? 2.0.0-beta.11

Plunker

http://plnkr.co/edit/cp3tSN64of4utoRaVizk?p=preview

Ionic Info

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0 OS: Node Version: v5.11.0

[herbzi]

For me this issue was fixed in beta.11 , refer to this issue: #7089 seems some people are still having it though..

Of course the plunker is running in beta.10 and there is no beta.11 plunker version atm so it is not conclusive.

but considering you're still having the issue you can try adding this to your code:

 ngAfterViewInit()
 {
   setTimeout(()=>
   {
     if(this.slider)
     {
          this.slider.update();
     }
   },300);
 }

That is what i had before Beta.11

[devarg]

Hi @Perroquiet I have recently implemented on beta11 these slides, and for me they work as expected. Can you post the html containing the slides? I suspect that you are missing the template reference variable #mySlider tag in the element, so you may be missing the reference of slider or getting a wrong one. And as far as your code shows, you are not setting any slideOptions. You could try out adding them.

<ion-slides #mySlider [options]="slideOptions" pager>

and I reference the options this way

ngOnInit() {
    this.slideOptions = {
      initialSlide: 0,
      loop: false,
      direction: 'horizontal',
      pager: true,
      speed: 800
    }
};

You can check the Slider API Docs they are pretty complete.

[herbzi]

yea devarg is probably right. If you dont have getSlider() working correctly then there is probably something wrong with your viewchild. the getSlider function works fine even in the plunker you posted. presumably though if your viewchild wasn't working you would see a bunch of errors in console like : Cannot read property 'getSlider' of undefined.

[devarg]

@Perroquiet I'm sorry, when I first read your description I skipped the fact that you posted a plnkr (that's why I requested a view sample) Now that I checked it out... You are doing it the right way! And actually your live example works but only after you resize plnkr app viewport. When you start your plnkr app the slides do not go back and forth, but as soon as you resize... the screen slides start working. I don't know if this is a plunkr related issue. I do not experience this this issue on an app i'm currently working on. Have you tried on a blank ionic2 project?

[jgw96]

@devarg Actually that issue that you are mentioning is a beta.10 (which the plunkr is currently running until beta.12 comes out) issue that was fixed in beta.11. @Perroquiet could you post a repo that i can use to reproduce this issue? Thanks!

[devarg]

@jgw96 You are right, I didn't realise about that. Thanks.

[Perroquiet]

Thanks everyone, sorry this was late but I tested in a blank beta.11 app and the slider methods are working fine, for the getSlider() I just followed @herbzi by adding a timeout to this.slider.update() inside an ionViewDidEnter() for it to work. Didn't notice that the plunker was still on beta.10 though

[ourarash]

I still have the same problem on ionic3, where slideNext was not working properly. The only way I could make it work was to call slides.update in ionViewDidEnter as suggested by @Perroquiet .

ionic info

Your system information:

ordova CLI: 6.5.0 Ionic Framework Version: 2.0.0-rc.5 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.3.4 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v7.9.0 Xcode version: Not installed

[Sireini]

Do it like this: this.slides.lockSwipes(false); this.slides.slideNext(); this.slides.lockSwipes(true);

[nicks258]

still getting error Cannot read property 'slideNext' of undefined

[Ranhiru]

As hacky as it may seem, I had to do it inside a setTimeout

 ionViewDidEnter() {
    setTimeout(() => {
      this.slides.lockSwipes(true);
    }, 500);
  }

[mayoorrai]

Got it to work using @Sireini 's suggestion - I'm using ion-slides for a quiz rather than a gallery so I locked down keyboard controls and sliding access.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.