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();
  }


}

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

Thanks Lucas for the warning. I haven't updated recently but I will as soon I get the opportunity.

Yep that's a pity for it's a fine implementation, nicely done.

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

Can confirm this. Happening in my projects as well.
Ionic CLI : 6.3.0 (/Users/______/.npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.6
@angular-devkit/schematics : 9.0.6
@angular/cli : 9.0.6
@ionic/angular-toolkit : 2.2.0

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