0

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!!!

PressLayouts
  • 3
  • 4

1 Answers1

0

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(); });
}
crazypsycho
  • 34
  • 3
  • Hello crazypsycho, Thank you so much for our issue is resolved but when i add your code then created below js issue "SyntaxError: Functions cannot be declared in a nested block in strict mode" So Please you give me hint for this issue. – PressLayouts Nov 10 '17 at 10:37
  • Hello,i think you put my snippet in the wrong context. The error says you are in strict mode and try to put it in a nested block and not standalone. It could work if you do it so: ` window.stopOwlPropagation = function(element) { jQuery(element).on('to.owl.carousel, next.owl.carousel, prev.owl.carousel, destroy.owl.carousel', function(e) { e.stopPropagation(); }); }` – crazypsycho Nov 13 '17 at 07:34