CODEWITHSUNDEEP
ionic4
Tarun Bhati
Tarun Bhati

Reputation: 356

ion-slides methods not working in ionic 4

Unable to use methods provided by ion-slides in official documentation. checked other answers in here but all seems to confuse ionic 4 with ionic 3 and providing answers applicable in ionic 3.

I want to get active index of slide. online documentation is not complete about how to implement it.

Upvotes: 1

Views: 8654

Answers (8)

Pratik Agarwal
Pratik Agarwal

Reputation: 348

I used IonSlides as type but it didn't help. For me, the above mentioned solutions didnt work (ionic v6.17.1). What worked was:

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

swipeRight() {
this.slides.nativeElement.slideNext();

All methods working this way. Altering ```{static: true} didn't throw any error If you console.log after declaring slides as IonSlides type, it shows ElementRef type

Upvotes: 0

Никита HiTNoX
Никита HiTNoX

Reputation: 41

u need declaration class to app.module.ts

@NgModule({
  declarations: [MySliderComponent]
})

Upvotes: 0

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3868

Build the slider in your html with a slides ID and a function which is emitted when the active slide has changed.

<ion-slides #slides (ionSlideDidChange)="getIndex()">
  <ion-slide></ion-slide>
</ion-slides>

In the .ts file you import the slider ID with ViewChild and set the function to get the active index. 
import { Component, OnInit, ViewChild } from '@angular/core';
import { Slides } from '@ionic/angular';  

export class Page implements OnInit {

  @ViewChild('slides') slides: Slides;

  constructor() {}

  ngOnInit() {
  }

  async getIndex() {
    console.log(await this.slides.getActiveIndex());
  }

}

Upvotes: 1

&#193;lvaro Bl&#225;zquez Sarabia
&#193;lvaro Bl&#225;zquez Sarabia

Reputation: 75

static: true

@ViewChild('ionSlides', { static: true }) ionSlides: IonSlides;

Upvotes: 0

Mab Kiani
Mab Kiani

Reputation: 584

Note: Use IonSlides and don't use ElementRef and nativeElement

Just follow the code below and it will work fine to get the active index from getActiveIndex()

import { IonSlides } from '@ionic/angular';

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

slideChanged(e: any) {
    this.slides.getActiveIndex().then((index: number) => {
        console.log(index);
    });
}

Upvotes: 7

Mr.S
Mr.S

Reputation: 94

I solved the problem like this:

page.ts:

import { IonSlides } from '@ionic/angular';

...

@ViewChild('slides') slides: IonSlides;


nextSlide() {
    this.slides.slideNext();
}

page.html:

<ion-slides #slides pager="true" [options]="slideOpts">
    <ion-slide>slide 1</ion-slide>
    <ion-slide>slide 2</ion-slide>
</ion-slides>

<ion-button (click)="nextSlide()" class="register-buttons">go next</ion-button>

exact the same thing goes for the back action

Upvotes: 0

monkey
monkey

Reputation: 1597

In ionic 4, the return type of the getActiveIndex() method is Promise<number>, so the code you were using in ionic 3 will not work anymore. You could at a bare minimum switch it out for somehting like:

     this.slider.getActiveIndex()
      .then(activeIndex => {
        console.log('active index = ', activeIndex );
        if (activeIndex < this.slides.length) {
          this.selectedSegment = this.slides[activeIndex ].id;
        }
     });

Or whatever you want to use it for. The official doc is actually pretty awesome on this: https://ionicframework.com/docs/api/slides

Upvotes: 2

Kyper Gio
Kyper Gio

Reputation: 11

I had the same issue, but I solved it with the following code:

My .ts file:

export class RegistroPage implements OnInit {
  @ViewChild('registroWizard') registroWizard: IonSlides;
  slideOpts: any;
  constructor() {
    this.slideOpts = {
      effect: 'fade'
    };
  }

  ngOnInit() {
     this.registroWizard.lockSwipeToNext(true);
  }

}

My HTML file:

<ion-slides #registroWizard pager="true" [options]="slideOpts">
    <ion-slide>
      <h1>Slide 1</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
  </ion-slides>

Upvotes: 0

Related Questions