ion-slides on ionic4 select slide on click - ionic4

Question

I'm using ion-slides to have a slider with different "selectable" tags like the image below
I have already accomplished that. The point that I'm struggling with is that I need to make the slide that I click on selected and the older one unselected without the need to scroll to that slide like the following screenshot
I could get the clicked index dynamically by the following snippet
I register for click action
(ionSlideTouchEnd)="onSlideTap($event)"
Then later on code I get the event
onSlideTap(event) {
this.slides.getSwiper().then(swiper => {
console.log("clicked Index = ", swiper.clickedIndex);
});
}
Does anyone have an idea of how to change active slide without scroll?

Answer 1

I have an idea. I hope it's helpful for you.
Template
<ion-slides #slides (ionSlideTouchEnd)=ionSlideTouchEnd($event)>
<ion-slide class="slide-item" *ngFor="let item of items; index as index;" (click)="onClickSlide(index)">
<ion-button [ngClass]="{'active': activeIndex === index}">{{item.title}}</ion-button>
</ion-slide>
</ion-slides>
TS file
import { IonSlides } from '#ionic/angular';
...
#ViewChild('slides', { read: IonSlides }) slides: IonSlides;
activeIndex: number = 0;
items = [
{
id: 1,
title: 'Item 1'
},
{
id: 2,
title: 'Item 2'
},
{
id: 3,
title: 'Item 3'
}
];
...
onClickSlide(id) {
this.activeIndex = id;
}
// Emitted when the user releases the touch.
ionSlideTouchEnd(){
// Lock the ability to slide to the next or previous slide.
this.slides.lockSwipes(true);
}
Style file
.active {
// style to detect the active slide
}