# Ion Slides in Super tabs Ionic 4

**URL:** <https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758>\
**Category:** Ionic Framework\
**Created:** [June 6, 2020, 10:28am UTC](https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758 "2020-06-06T10:28:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![FreakyMind](https://avatars.discourse-cdn.com/v4/letter/f/f05b48/32.png) [@FreakyMind](https://forum.ionicframework.com/u/FreakyMind)\
**Post date:** [June 6, 2020, 10:28am UTC](https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758/1 "2020-06-06T10:28:13Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![FreakyMind](https://avatars.discourse-cdn.com/v4/letter/f/f05b48/32.png) [@FreakyMind](https://forum.ionicframework.com/u/FreakyMind)\
**Post date:** [June 8, 2020, 5:22am UTC](https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758/2 "2020-06-08T05:22:15Z")

</div>

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…???

---

<div class="post-metadata">

**Author:** ![FreakyMind](https://avatars.discourse-cdn.com/v4/letter/f/f05b48/32.png) [@FreakyMind](https://forum.ionicframework.com/u/FreakyMind)\
**Post date:** [June 9, 2020, 4:11am UTC](https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758/3 "2020-06-09T04:11:41Z")

</div>

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… 🙂

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

---

<div class="post-metadata">

**Author:** ![KareemMohammed](https://avatars.discourse-cdn.com/v4/letter/k/71e660/32.png) [@KareemMohammed](https://forum.ionicframework.com/u/KareemMohammed)\
**Post date:** [August 23, 2021, 5:28pm UTC](https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758/4 "2021-08-23T17:28:08Z")

</div>

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

```

}

---

<div class="post-metadata">

**Author:** ![ipkiss](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@ipkiss](https://forum.ionicframework.com/u/ipkiss)\
**Post date:** [April 7, 2022, 2:13pm UTC](https://forum.ionicframework.com/t/ion-slides-in-super-tabs-ionic-4/190758/5 "2022-04-07T14:13:31Z")

</div>

Here’s the actual solution:

```auto
  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:

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

```

[See the documentation](https://zyra.github.io/ionic-super-tabs/configuration/)