Is it possible to add owl-carousel inside owl-carousel item?

[mjsaijem09]

<owl-carousel-o>
    <ng-template carouselSlide id="shop">
        <app-recommended></app-recommended>
    </ng-template>
    <ng-template carouselSlide id="products">
        <!-- list of products -->
    </ng-template>
    <ng-template carouselSlide id="categories">
        <!-- list of categories -->
    </ng-template>
</owl-carousel-o>


recommended.component.html

<owl-carousel-o>
    <ng-template carouselSlide id="1">
        <!-- product 1 -->
    </ng-template>
    <ng-template carouselSlide id="2">
        <!-- product 2 -->
    </ng-template>
    <ng-template carouselSlide id="3">
        <!-- product 3 -->
    </ng-template>
</owl-carousel-o>

I did this kind of structure for a shop page. The problem is when we go to the recommended section and try to swipe, it will swipe the parent carousel instead of the child carousel which is the recommended section.

So, my question is. Is it possible to perform a nested carousel that when we swipe the child carousel the parent carousel will not swipe or will not do anything?