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
});
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').
This also says pagination (dots) can be turned off with: pagination: false, The dots: false, is for version 2.
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 .
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');
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With