Ionic 4 Slider Previous Next Working Example with Angular 9

Hi All,

Recently I got an opportunity to create slider with previous and next arrow marks for one of my mobile app, Herewith sharing the code to help someone.

Part of the code from the following are actually taken out from stackoverflow & ionic support link, but still on top of it I did lot of things to make it work, so sharing here for someone.

home.component.html:

<ion-header>
	<ion-toolbar>
		<ion-row class="filters" style="font-size:14px;">
			<ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-2 style="display: flex;justify-content: center;align-items: center;">
				<ion-icon *ngIf="showLeftButton" name="arrow-back" style="color: #ccc;"></ion-icon>
			</ion-col>
			<ion-col no-padding col-8>
				<ion-slides #slides (ionSlideDidChange)="slideChanged()" (ionSlideDrag)="slideChanged()" slidesPerView="3">
					<ion-slide (click)="filterData(category.categoryId)" *ngFor="let category of categories">
						<p [class.selected]="selectedCategory?.categoryId === category.categoryId" style="color: blue;margin: 0;font-size: 1rem;line-height: 1.6rem;font-weight: 100;">{{ category.categoryName }}</p>
					</ion-slide>
				</ion-slides>
			</ion-col>
			<ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-2 style="display: flex;justify-content: center;align-items: center;">
				<ion-icon *ngIf="showRightButton" name="arrow-forward"></ion-icon>
			</ion-col>
		</ion-row>
	</ion-toolbar>
</ion-header>

home.component.ts:

// Angular
import { Component, Injector, ViewChild, ElementRef } from '@angular/core';

// Ionic
import { Slides } from '@ionic/angular';

// Models
import { Category } from '../shared/models/category';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChild('slides') slides: Slides;

public selectedCategory: Category;
public categories: Array<Category> =[];
public showLeftButton: boolean;
public showRightButton: boolean;

constructor(public injector: Injector) {

var category = new Category();
category.categoryName='recharge';

this.categories.push(category);

var categoryFashion = new Category();
categoryFashion.categoryName='Fashion';

this.categories.push(categoryFashion);

var categoryTravel = new Category();
categoryTravel.categoryName='Travel';

this.categories.push(categoryTravel);

// Select it by defaut
this.selectedCategory = this.categories[0];

// Check which arrows should be shown
this.showLeftButton = false;
this.showRightButton = this.categories.length > 3;

}

public filterData(categoryId: number): void {
// Handle what to do when a category is selected
}

// Method executed when the slides are changed
public slideChanged(): void {
let currentIndex;
let slidesLength;
this.slides.getActiveIndex().then(data => {
currentIndex = +data;

this.slides.length().then(data1 => {
slidesLength = +data1;

this.showLeftButton = (currentIndex != 0);
this.showRightButton = ((currentIndex+1) != slidesLength );

});

});

}

// Method that shows the next slide
public slideNext(): void {
this.slides.slideNext();
}

// Method that shows the previous slide
public slidePrev(): void {
this.slides.slidePrev();
}
}

Preview / Output:

Thanks for reading this post!! Happy to blog & help!!