Ion-slide indexing

Ionic Framework Ionic Angular
1

Hi All,

i need some help with the IonSlide indexing,
so im trying to create a button for slider to show the next one slide
found some source in the internet and following,

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

  @ViewChildren('slides') slides: IonSlides;
  selectedSlide: any;

  next()
  {
    this.selectedSlide.getActiveIndex().then((slidesIndex) =>
    {
      if(slidesIndex == 1)
      {
        console.log("Done Slider");
      }
      else{
        this.selectedSlide.slideNext();
      }
    }
    )
  }

          <ion-slides #slides pager="true" [options]="slideOpts" (ionSlideDidChange)="ionSlideChange(slides)">
            <ion-slide>1</ion-slide>
            <ion-slide>2</ion-slide>
          </ion-slides>
          <ion-button class="tour-button" (click)="next()">
            <div class="parent">button</div>
          </ion-button>

and then got an error the getActiveIndex seems not working,
I look few resources from the internet but still cant make work in my side
how can I get the indexing working for my slider button?

Sorry if I miss some very basic since im really new on this Ionic also angular :slight_smile:

2

What is the error, if you say “the getActiveIndex seems not working”?

3

Hi Einfach,

i got the error
image

4

You are calling getActiveIndex on selectedSlide, not on slides^^

6

ah Yes,
got it corrected,

it seems retrn error " is not a function "

image

7

First: I think you should use ViewChild instead of ViewChildren here. Read this
Second: Try debugging here. What does slides look like?

1 Like
8

Heyy!!

i got it works ! many thanks man!

so i made it work by changing the ViewChild ,

  @ViewChild ('slides', {static:true}) slides: IonSlide;