Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reset owl carousel autoplayTimeout after user action

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
    });
like image 766
Stefan Iordache Avatar asked May 23 '18 12:05

Stefan Iordache


People also ask

How do you refresh carousel?

You can initialize the carousel and store it in a variable and using that variable you can refresh the owl carousel. like the below example. var $owlCarousel = $('. owl-carousel').

How do you remove the dots on owl carousel?

This also says pagination (dots) can be turned off with: pagination: false, The dots: false, is for version 2.

How do you change transitions in owl carousel?

Use transitionStyle option to set transtion. There are four predefined transitions: "fade" , "backSlide" , goDown and scaleUp . You can also build your own transition styles easily. For example by adding "YourName" value transitionStyle: "YourName" , owlCarousel will add .


1 Answers

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');
    });
});
like image 68
JustDevelop Avatar answered Oct 26 '22 15:10

JustDevelop