'slideNext' undefined using Ionic 4 Slides

Ionic Framework Ionic Angular
1

I’m having trouble referencing my slider to use the ‘SlideNext’ method, resulting in an undefined error. I’m using Ionic 4 Angular.

import { Component, OnInit, ViewChild  } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.scss'],
})
export class CalculatorComponent implements OnInit {

  @ViewChild('slider', { read: IonSlides }) slides: IonSlides;

  slideOpts = {
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };

  constructor() { }

  ngOnInit() {}

  slideNext() {
    console.log(this.slides);
    this.slides.slideNext();
  }

}

<ion-slides #slider [options]="slideOpts" pager>
    <ion-slide>
      <h1 class="mt-0">Slide 1</h1> 
    </ion-slide>
    <ion-slide>
      <h1 class="mt-0">Slide 2</h1> 
    </ion-slide>
    <ion-slide>
      <h1 class="mt-0">Slide 3</h1>
    </ion-slide>
  </ion-slides>

Any ideas where I might be going wrong?

1 Like
2

Whats is the Output of console.log(this.slides);?

3

the console log just returns ‘undefined’. I checked the version of Ionic again it’s actually v5 - not sure if that changes much.

4

Are the <ion-slides> somehow wrapped in an ngIf? Also remove the { read: IonSlides } - this is not necessary

1 Like
5

There’s no ngIf wrapped around it. Interesingly, removing { read: IonSlides } now returns ElementRef but still the error ‘this.slides.slideNext is not a function’.

ElementRef {nativeElement: ion-slides.md.slides-md.swiper-container.hydrated.swiper-container-initialized.swiper-container-hor…}
nativeElement: ion-slides.md.slides-md.swiper-container.hydrated.swiper-container-initialized.swiper-container-horizontal
__proto__: ElementRef
constructor: class ElementRef
__proto__: Object
6

thats strange, works like this for me. If this is the only Slider in this component please try @ViewChild(IonSlides)