For example, in case you have set allowTouchMove: false inside of the <ion-slides> options and allow navigating only with buttons (for example with <ion-fab>), try this solution:
The Markup
<ion-slides #slider [options]="this.sliderOptions" (ionSlideDidChange)="this.slideDidChange();">
...
</ion-slides>
The Code
import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
export class MyPage implements OnInit {
// Get the `<ion-slides>` node from the Markup
@ViewChild (IonSlides) protected slider: IonSlides;
/** @var {number} sliderIndex Reflects the current index of the `slider`, starting at the first slide (0) */
protected sliderIndex: number = 0;
/** @var {object} sliderOptions Contains the options for the slider */
protected sliderOptions: object = {
allowTouchMove: false
};
[...]
constructor() {}
[...]
/**
* @protected
* @async
* @function slideDidChange
* @description Function to emit, when the slider has changed (navigated)
* @return {Promise<void>}
*/
protected async slideDidChange(): Promise<void> {
this.sliderIndex = await this.slider.getActiveIndex();
return Promise.resolve();
}
}
Now you can adapt “old” Ionic 3 Functions to the behaviour of Ionic 4, something like this:
this.slider.isBeginning(); -> this.sliderIndex === 0
this.slider.isEnd(); -> this.sliderIndex === [insert index of your last slide here]
In Action
<ion-fab horizontal="start" vertical="bottom">
<ion-fab-button
(click)="this.slideTo('prev')"
[hidden]="this.sliderIndex === 0" // Example to hide the Button
[disabled]="this.sliderIndex === 0"> // Example to disable the Button
<ion-icon name="arrow-back"></ion-icon>
</ion-fab-button>
</ion-fab>
Oh, you want to know more about the this.slideTo('prev') Function? Sure, here you go:
/**
* @protected
* @async
* @function slideTo
* @description Function to trigger a slide with some additional logic
* @param {'prev' | 'next'} direction The direction, where we should swipe to
* @return {Promise<void>}
*/
protected async slideTo(direction: 'prev' | 'next'): Promise<void> {
const currentSlideIndex: number = await this.slider.getActiveIndex();
if (direction === 'next') {
await this.slider.slideNext();
// Additional Logic, depending on the current slide index
if (currentSlideIndex === 0) {
// Maybe some Tracking here?
} else if (currentSlideIndex === 1) {
// Or additional markup logic here?
} else if (currentSlideIndex === 2) {
// Nah? Okay :(
} else if (currentSlideIndex === 3) {
// But here!
}
} else if (direction === 'prev') {
await this.slider.slidePrev();
if (currentSlideIndex === 1) {
// Maybe some Tracking here?
} else if (currentSlideIndex === 2) {
// Or additional markup logic here?
} else if (currentSlideIndex === 3) {
// Nah? Okay :(
} else if (currentSlideIndex === 4) {
// But here!
}
}
return Promise.resolve();
}
The usage is straight forward, like:
this.slideTo('prev');this.slideto('next');
Hope it helps someone!
Cheers
Unkn0wn0x