Showing two items instead of three on initial load - WordPress/Owl Carousel

Question

I've got a problem regarding Owl Carousel on a Wordpress site. When I visit the site for the first time the owl carousel shows two items instead of three as added in the script. The problem is that I doesn't show the two items as it should. if it was the plan, but rather two and 1/6 of the third item: Owl carousel problem (2 items with a bit of 3rd)

When I reload/refresh the site it shows three items as it should: Owl carousel as it should be.

My script:

jQuery(document).ready(function( $ ){
    $('.owl-carousel').owlCarousel({
        loop:false,
        margin:30,
        URLhashListener:true,
        startPosition: 'URLHash',
        responsiveClass:true,
        nav:true,
        responsive:{
            0:{
                items:1,
                nav:true,
                slideBy: 1
            },
            767:{
                items:2,
                nav:true,
                slideBy: 2
            },
            1020:{
                items:3,
                nav:true,
                slideBy: 3
            }
        }
    });
}); 

You can check the site here and see the carousel at the bottom (I'm working on the site, so there might be some changes).

Any clues would be greatly appreciated - thanks!

Answer 1

Try to specify the default value in the items: 3

(function($) {
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop: false,
            margin: 30,
            items: 3,
            URLhashListener: true,
            startPosition: 'URLHash',
            responsiveClass: true,
            nav: true,
            responsive: {
                0: {
                    items: 1,
                    nav: true,
                    slideBy: 1
                },
                767: {
                    items: 2,
                    nav: true,
                    slideBy: 2
                }
            }
        });
    });
})(jQuery);

(Off topic) Also, you should not re-specify parameters such as: nav: true

(function($) {
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop: false,
            margin: 30,
            items: 3,
            URLhashListener: true,
            startPosition: 'URLHash',
            responsiveClass: true,
            nav: true,
            responsive: {
                0: {
                    items: 1,
                    slideBy: 1
                },
                767: {
                    items: 2,
                    slideBy: 2
                }
            }
        });
    });
})(jQuery);

---

You may need to wait until the page is fully loaded, try it:

(function ($) {
    window.addEventListener("load", function(){
        $(".owl-carousel").owlCarousel({
            loop: false,
            margin: 30,
            URLhashListener: true,
            startPosition: "URLHash",
            responsiveClass: true,
            nav: true,
            responsive: { 0: { items: 1, slideBy: 1 }, 767: { items: 2, slideBy: 2 }, 1020: { items: 3, slideBy: 3 } },
        });
    });
})(jQuery);