Ion-slides as a parent component with horizontally scrollable items inside

Hello , i have a use case where i have a couple of slides and inside each slide a different component dependent on api reply , now i know which components are going to be horizontally scrollable and which arent but i dont know how to achieve this to enable horizontal scrolling if the swipe gesture is on the component itself its a swipe to scroll and if its on the empty space under the component then its a swipe to get the next slide ,
this is my current code for that part


<ion-slides [pager]='true' >
<ion-slide *ngFor="let Page of Pages">
.
.
.

<ng-container *ngIf="Page.PageType=='some page type' ">
                <scrollable component ></scrollable component >
  </ng-container>
.
.
.

</ion-slide>

where the dots represent other components , also one of the slides contains a map and when i try to swipe to move around in the map it simply switches to the next or previous slide , all i need to do is detect if this swipe is on the component itself so i need to scroll or if this swipe is on the empty area in the slide so swipe to the next slide any ideas ?
thanks