Swipeable tabs in ionic 3

#1

I have developed a swipeable tabs app, tabs are like FIRST TAB, SECOND TAB, THIRD TAB,
FIRST TAB contains some 4 to 5 list items with images and SECOND TAB also contains some 6 to 8 list of items with images and THIRD TAB also same respectively.

In FIRST TAB if am scrolling little upword till 2 to 3 list items and swiping to SECOND TAB, This is working correctly, at the same if am swiping from SECOND TAB to FIRST TAB it showing items from 3rd rather than showing first item from list.

If am swiping the tabs from FIRST to SECOND and SECOND to THIRD every time i wanted to display the first item in tabs, this is my code

.html

{{this.title1}}
{{this.title2}}
{{this.title3}}
      // above listed code is tabs (getting dynamically)


    </ion-segment>
  </div>

// Using below code am displaying the list of items in each tabs.

      <ion-slides #pageSlider (ionSlideWillChange)="changeWillSlide($event)">
        <ion-slide>
            <ion-list>
                <ion-item class="Tag" *ngFor="let item of firstTab" (click)="TabAction(item)">
                    <div class="tag">{{item.credits}}<br>credits</div>
                    <img src="{{ item.src }}">
                    <p style="margin-left: 11px;
                    display: block;
                    visibility: visible;
                    clear: both;" [innerHTML]="item.title">
                        
                    </p>
                </ion-item>
              </ion-list>
        </ion-slide>
        <ion-slide>
            <ion-list>
                <ion-item class="rewardsTag" *ngFor="let item of secondTab" (click)="TabAction(item)">
                    <div class="tag">{{item.credits}}<br>credits</div>
                    <img src="{{ item.src }}">
                    <p style="margin-left: 11px;
                    display: block;
                    visibility: visible;
                    clear: both;" [innerHTML]="item.title">
                        
                    </p>
                </ion-item>
              </ion-list>
        </ion-slide>
        <ion-slide>
            <ion-list>
                <ion-item class="rewardsTag" *ngFor="let item of ThirdTab" (click)="TabAction(item)">
                    <div class="tag">{{item.credits}}<br>credits</div>
                    <img src="{{ item.src }}">
                    <p style="margin-left: 11px;
                    display: block;
                    visibility: visible;
                    clear: both;" [innerHTML]="item.title">
                        
                    </p>
                </ion-item>
              </ion-list>
        </ion-slide>
      </ion-slides>

can anyone help to achieve this.
Thanks in advance.

#2

Without code no one would able to help you
Either use stackblitz or github

#3

I have edited the question, can you check once.