Ionic 4 Sliding segments

sliding-segments.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-toolbar>
    <ion-segment (ionChange)="segmentChanged()" [(ngModel)]="segment" color="warning">
      <ion-segment-button value="0">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

  <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="true">
    <ion-slide>
      First
    </ion-slide>
    <ion-slide>
      second
    </ion-slide>
    <ion-slide>
      third
    </ion-slide>
  </ion-slides>

</ion-content>

sliding-segments.page.scss

ion-slide {
  height: calc(100vh - 140px);
}

sliding-segments.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.page.html',
  styleUrls: ['./demo.page.scss'],
})
export class DemoPage implements OnInit {

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

  segment = 0;

  constructor(
  ) { }

  ngOnInit() {
  }

  async segmentChanged() {
    await this.slider.slideTo(this.segment);
  }

  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
  }


}

How do I make the ion-segment selected tab in the middle and the rest of tabs to either side of it when scrolling the content with overflow tab menu items? like a ViewPager in Android.

Below is the implementation of item i want to center.

I want to center the top ion-segment scroll while scrolling through ion-slide.

How do I make the ion-segment selected tab in the middle and the rest of tabs to either side of it when scrolling the content with overflow tab menu items? like a ViewPager in Android.
I want to center the top ion-segment scroll while scrolling through ion-slide.

In this case, you probably shouldn't use segments but slides

Not working for me.. getactivatedindex is not returning anything ?/ can anyone help ?

but when I manually refresh my page it start working !! I have used same code

On Ionic 5.4.16 if we leave and return to the page the segment seem not to work anymore.

Yes I confirm in current version its is not working.

Superb, it worked perfectly for my environment

Ionic CLI                     : 6.8.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework               : @ionic/angular 5.1.0

I'm attempting to scroll through. Once the gesture is complete, it takes me to the next segment

I have more than 8 slides and ion-segment-button... slides working fine.. but when i scroll ion-slide, ion-segment-button not scrolling with ion-slide. how can i scroll active segment-button with the ion-slide?

Thank you very much!
Tested and working on Ionic 5 :)

great bro

when i select any segment by default ion slide wont change it always shows the first page