Reset owl carousel autoplayTimeout after user action
Asked Answered
R

1

13

I let owl to his default option (5000) but I have a problem when I start to drag or use the navigation, the owl carousel doesn't reset this time. If I drag 3 slides in 4 seconds, the 4th slide has only 1 second and jumps automatically to the next slide.

What's the solution?

owlSlider.owlCarousel({
        items: numberOfSlides,
        loop: loopCarousel,
        //video: true,
        nav: true,
        navText: ['<span class="ico ico-pointer_left"></span>', '<span class="ico ico-pointer_right"></span>'],
        dots: true,
        autoplay: true,
        lazyLoad: true,
        //autoplayTimeout: 5000,
        startPosition: currentSlide,
        // autoplaySpeed: 300
        autoplayHoverPause: true
    });
Rundown answered 23/5, 2018 at 12:39 Comment(0)
D
33

Stopping autoplay and restarting after a slide change fixed this problem for me.

var owl;

$(document).ready(function(){
    owl = $(".owl-carousel").owlCarousel({
        nav: true,
        autoplay: true,
        autoplayTimeout: 2000
    });

    owl.on('changed.owl.carousel', function(e) {
        owl.trigger('stop.owl.autoplay');
        owl.trigger('play.owl.autoplay');
    });
});
Declination answered 1/7, 2018 at 10:36 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.