在初始加载时显示两个项目而不是三个项目 - WordPress/Owl Carousel

Question

我在 Wordpress 网站上遇到了关于 Owl Carousel 的问题。当我第一次访问该站点时，猫头鹰轮播显示两个项目，而不是脚本中添加的三个项目。问题是我没有按应有的方式显示这两个项目。如果是计划，而是第三项的 2 和 1/6： Owl carousel problem (2 items with a bit of 3rd)

当我重新加载/刷新网站时，它应该显示三个项目： Owl carousel as it should be.

我的脚本：

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
            }
        }
    });
}); 

您可以查看网站here 并查看底部的轮播（我正在处理该网站，因此可能会有一些变化）。

任何线索将不胜感激 - 谢谢！

Answer 1

尝试在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);

（离题）此外，您不应重新指定参数，例如：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);

---

您可能需要等到页面完全加载后，尝试一下：

(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);