'slideNext' undefined using Ionic 4 Slides

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';

  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() {

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

Any ideas where I might be going wrong?

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

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

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

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

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