ion-slides on ionic4 select slide on click

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?

score 2 · Answer 1 · answered Aug 24 '20 at 16:27

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
}

ion-slides on ionic4 select slide on click

1 Answers1