Ionic 3 slideTo not working.

[shahrushabh1996]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [X] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [X] bug report [ ] feature request

Related code:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { PhotoViewer } from '@ionic-native/photo-viewer';

/**
 * Generated class for the SliderPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-slider',
  templateUrl: 'slider.html',
})
export class SliderPage {

  @ViewChild(Slides) slides: Slides;

  images: any;

  active_slide_index: number = 1;

  constructor(public navCtrl: NavController, public navParams: NavParams, public photoViewer: PhotoViewer) {
    this.images = navParams.get('images');
    this.active_slide_index = navParams.get('active_slide_index');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SliderPage');
  }

  ngAfterViewInit() {
    this.slides.slideTo(active_slide_index, 500);
  }

  zoomImage(image) {
    this.photoViewer.show(image);
  }

}

<!--
  Generated template for the DetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title class="capitalize">Slider</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <ion-slides>
        <ion-slide *ngFor="let image of images"  (click)="zoomImage(image)">
          <img src="{{image}}" />
        </ion-slide>
    </ion-slides>
</ion-content>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Uncaught (in promise): TypeError: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined at slideTo (http://localhost:8100/build/vendor.js:50386:37) at Slides.slideTo (http://localhost:8100/build/vendor.js:59861:80) at SliderPage.webpackJsonp.309.SliderPage.ngAfterViewInit (http://localhost:8100/build/2.js:80:21) at callProviderLifecycles (http://localhost:8100/build/vendor.js:12782:18) at callElementProvidersLifecycles (http://localhost:8100/build/vendor.js:12753:13) at callLifecycleHooksChildrenFirst (http://localhost:8100/build/vendor.js:12737:17) at checkAndUpdateView (http://localhost:8100/build/vendor.js:13870:5) at callWithDebugContext (http://localhost:8100/build/vendor.js:15094:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:14631:12) at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11654:18)

Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.8 Angular Core: 5.0.3 Angular Compiler CLI: 5.0.3 Node: 8.10.0 OS Platform: Windows 8.1 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Hi ionic team here is a new bug can you please tell me How can I solve this?

[somabagyinszky]

Hi, I am completely new to ionic, but my first try would be to implement 'AfterViewInit' in your 'SliderPage' like so:

So you import it:

import { Component, ViewChild, AfterViewInit } from '@angular/core';

Then:

export class SliderPage implements AfterViewInit { ... }

That was the only thing that struck my eyes. My apologies if it does not make any sense, but like I said I am new to ionic and angular.

[eweren]

I've got the same bug. Seems like slides in our pages is missing something. Debugging to the point, where the error was thrown, shows that slides._snapGrid seems to be undefined. Still searching for the fix though.

[inikolin]

Having the same problem, slideTo does not seem to be working.

[rmacuna]

Having the same problem , sideTo is not a function even if i import it from @angular/ionic (I'm using angular 6 + ionic 4 project)

[adamlacombe]

It sounds like you might be trying to run this.slides.slideTo() before ion-slides has loaded.

Something like this should work:

@Component({
....
})
export class TutorialPage {

  @ViewChild('slides') slides;

  ionSlidesDidLoad() {
    return new Promise(resolve => {
      this.slides.nativeElement.addEventListener('ionSlidesDidLoad', () => {
        resolve(true);
      });
    });
  }

  async ionViewWillEnter() {
    await this.ionSlidesDidLoad();
  }

  async ionViewDidEnter() {
    this.slides.nativeElement.slideTo(1);
  }
}

This might also help: https://github.com/ionic-team/ionic/issues/14918#issuecomment-410553954

[Honlymapa]

Property 'nativeElement' does not exist on type 'Slides'.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/854