nested owl carousel 2 not working

Question

I have 2 owl carousel nested like
This is html structure

    <li class="product">
        <ul class="product-image-slider owl-carousel">
            <li>image 1</li>
            <li>image 1</li>
        </ul>
        content here..
    </li>
    <li class="product">
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
        content here..
    </li>
    <li class="product">
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
        content here..
    </li>  
</ul>

and this is js script

$(document).ready(function() {
            var outerCarousel = $('.product-lists.owl-carousel');
            outerCarousel.owlCarousel({
                loop: true,
                center: true,
                items: 1,
                nav: false,
                dots: false
            });

            var innerCarousel = $('.product-image-slider.owl-carousel');
            innerCarousel.owlCarousel({
                loop: true,
                center: true,
                items: 1,
                nav: false,
                dots: false,
                /* mouseDrag: false,
                touchDrag: false,
                pullDrag: false */
            });

        });

But when i drag carousel inner (product-image-slider) then parent carousel also drag. I try to disable or prevent parent carousel but not working. Like

innerCarousel.on('drag.owl.carousel', function(event) {
        outerCarousel.data('owl.carousel').settings.touchDrag = false;
        outerCarousel.data('owl.carousel').settings.mouseDrag = false;
    });
    innerCarousel.on('dragged.owl.carousel', function(event) {
        outerCarousel.data('owl.carousel').settings.touchDrag = true;
        outerCarousel.data('owl.carousel').settings.mouseDrag = true;
    });

How can i do it thank

Answer 1

You can try this out

https://jsfiddle.net/ugrw2vjq/19/

insted of using drag.owl.carouse and dragged.owl.carousel events you can use the mousedown core event of owl carousel.

to achieve what you want, you have to stop the propagation of this event from the inner carousel to the outer carouse, so the mousedown event will fire on the inner carousel but would not be propagated to elements behind id.

(you can aslo add the touchstart event as I did in my example if your carousel should work with touch)

do you need your carousel to be on loop? as you put the inner carousel in the first slide and that slide is clonned when on loop it will cause you issues when dragging the main carousel from the first element backwards