Ion Slides in Super tabs Ionic 4

Ionic Framework
1

Hey Guys,

I am facing problem with the Ion-Slides in Supertabs…

When I try to slide the ion-slide manually , the supertabs slides and switched to next tabs…

Here is my code structure.

Home Categories offers orders 
<super-tabs-container>
	<super-tab>
		<ion-content>
			<ion-slides>
				<ion-slide *ngFor="let middle of middleBanner">
					<div class="slider-img">
						<img src="{{this.image_url_bs_banner+middle.banner_name}}">
					</div>
				</ion-slide>
			</ion-slides>
		</ion-content>
	</super-tab>
	
	<super-tab>
		<ion-nav [root]="category"></ion-nav>
	</super-tab>
	<super-tab>
		<ion-nav [root]="offers"></ion-nav>
	</super-tab>
	<super-tab>
		<ion-nav [root]="orders"></ion-nav>
	</super-tab>

</super-tabs-container>

Please help me out…

1 Like
2

Hey guys I have got the solution and working also… but getting an error on first time compiling… here it is…

In ts file

tabConfig: SuperTabsConfig = {

	allowElementScroll: true,
	shortSwipeDuration: 180,
	dragThreshold: 40,
	
};

In html were we have defined the supertabs,

<super-tabs [config]=“tabConfig”>

and now on compiling its giving this error

ERROR in src/app/pages/homepage/homepage.page.ts:21:13 - error TS2304: Cannot find name ‘SuperTabsConfig’.

** 21 tabConfig: SuperTabsConfig = {**
~~~~~~~~~~~~~~~

Any solution…???

3

After many trials, Finally I got the solution for the above error, Instead of writing the Configuration in TS file , just right all the configuration in the HTML file directly thats all.

Now the Slider in Super-Tabs Working fine… :slight_smile:

<super-tabs [config]="{allowElementScroll: true, shortSwipeDuration: 180,
dragThreshold: 40}" >

4

in service i set new var
private swipeEnabled = new BehaviorSubject(true);
and make a function to return it
swiper() {
return this.swipeEnabled;
}
in the super tabs
<super-tabs-container [swipeEnabled]=“swipeEnabled”>

in TS
swipeEnabled: boolean = true;
swiper() {

this.service.swiper().subscribe((res) => {

  this.swipeEnabled = res;

  console.log(this.swipeEnabled);

});

}

in component that has slide
ionSlideDrag() {

this.service.swiper().next(false);

}

ionSlideTransitionEnd() {

this.service.swiper().next(true);

}

5

Here’s the actual solution:

  config: any = {
    allowElementScroll: true,
    avoidElements: true
  }

Note the “avoidElements” property. It tells Super Tabs to look and avoid elements with avoid-super-tabs attribute.
Now, on the element which scrolls alongside the super tab (ion-slides, or element with overflow-y: scroll for example), do:

<ion-slides avoid-super-tabs="true">

See the documentation