Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Owl Carousel AutoPlayTimeout Does Not Scroll Smoothly

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.

like image 358
Nina Morena Avatar asked Feb 04 '15 03:02

Nina Morena


People also ask

How do you make an owl carousel responsive?

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, ... } }

What is Autoplaytimeout?

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).


2 Answers

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.

like image 124
Sandeep Kamara Avatar answered Oct 17 '22 02:10

Sandeep Kamara


Using smartSpeed property :

$("#owl-demo").owlCarousel({ autoplay: true, smartSpeed: 2500 });
like image 3
Shiyas Pathiyassery Avatar answered Oct 17 '22 02:10

Shiyas Pathiyassery