Trigger not working properly in multiple with nested owl carousel

Question

When i mouse hover on .product-slider li.product then image slider is start autopay and mouse leave then autoplay stop. This is working fine but effect in both slider product-slider and product image slider.

We need to only effect autoplay, autoplay stop and goto slide first in product-image slider when mouser hover in single product slide.

We are use owl carousal version 2.1.6

HTML code

`<ul class="product-lists product-slider owl-carousel">

    <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 class="product-image-slider owl-carousel">
            <li>image 1</li>
            <li>image 1</li>
        </ul>
        content here..
    </li>
    <li class="product">
        <ul class="product-image-slider owl-carousel">
            <li>image 1</li>
            <li>image 1</li>
        </ul>
        content here..
    </li>
    .
    .
    .   
</ul>`

Slider js code bellow

`var owl1 = $(".product-slider"); 
owl1.owlCarousel({
    loop:true,
    nav:true,
    smartSpeed:450,
    responsiveClass: true,
    responsiveRefreshRate : 10,
    items:3,                        
});

var owl2 = $(".product-image-slider"); 
owl2.owlCarousel({
    loop:true,
    dot:true,
    smartSpeed:450,
    responsiveClass: true,
    responsiveRefreshRate : 10,
    items:1,                        
});

$('.product-lists li.product').on('mouseenter',function(e){
   owl2.trigger('to.owl.carousel', 0);
   owl2.trigger('play.owl.autoplay');
});

$('.product-lists li.product').on('mouseleave',function(e){
    owl2.trigger('to.owl.carousel', 0);
    owl2.trigger('stop.owl.autoplay');
});`

Please help me !!!

Thanks in Advance!!!

Answer 1

It is a known issue in owl.carousel: https://github.com/OwlCarousel2/OwlCarousel2/issues/1478

You can fix this by disable Propagation on these events:

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

Or in one-line event-handler:

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