Owlcarousel2: Navigation on nested carousel affects parent (and nested sometimes doesn't render)

[Naphier]

Nest a carousel inside of another and add custom navigation using the available trigger events. The trigger events for the child affects the parent as well as the child.

The native navigation buttons work fine.

Also sometimes this inner carousel doesn't display when returning to it's parent item.

JSFiddle

The "goto" buttons for skipping to a specific index don't seem to work in fiddle, but the code should be ok if you want to put it on a real server.

Another note:
Unfortunately .prev() and .next() seem to not work at all.

[crazypsycho]

I´ve made a fix for that:

    function stopOwlPropagation(element) {
        jQuery(element).on('to.owl.carousel', function(e) { e.stopPropagation(); });
        jQuery(element).on('next.owl.carousel', function(e) { e.stopPropagation(); });
        jQuery(element).on('prev.owl.carousel', function(e) { e.stopPropagation(); });
        jQuery(element).on('destroy.owl.carousel', function(e) { e.stopPropagation(); });
    }
    stopOwlPropagation('.owl-carousel');`

You can also write the stopProgation-Events in one-line:

    function stopOwlPropagation(element) {
        jQuery(element).on('to.owl.carousel, next.owl.carousel, prev.owl.carousel, destroy.owl.carousel', function(e) { e.stopPropagation(); });
    }

[fredski02]

This doesn't work for me.

[rubenkuipers]

This does work for me, but only when I call this function before my custom trigger functions

[swinggraphics]

stopPropagation doesn't seem to work on play.owl.autoplay :(