I'm having a bit of an issue getting the autoplayTimeout to scroll smoothly on the page. It stops after it loads the first 5 images and scrolls the next one in and it is very jerky. You can see an example here at the bottom of the page .
Here are my settings within the javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoplay: true,
items: 5,
autoplayHoverPause: true,
autoplayTimeout: 10,
autoplaySpeed: 1000,
fluidSpeed:true,
itemsDesktop : [1199,3],
itemsDesktopSmall: [979,3],
itemsMobile: [479,1],
navigation: false,
dots: false,
loop: true
});
});
</script>
I'm not sure if I'm using the right combination of settings.
Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }
Duration (in milliseconds) of the steady state between slide change animations in autoplay mode (i.e. time between the end of one slide change animation and the beginning of the next one).
jQuery('.owl-carousel').owlCarousel({
items:3,
autoplay: true,
slideTransition: 'linear',
autoplayTimeout: 6000,
autoplaySpeed: 6000,
});
I'm using this code for my own carousel to make carousel smooth. Note: you have to define both autoplayTimeout and autoplaySpeed value should be same otherwise it will jerk when first slide is coming from the last slide.
Using smartSpeed property :
$("#owl-demo").owlCarousel({ autoplay: true, smartSpeed: 2500 });
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