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

Question

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

当我 reload/refresh 该网站时，它显示了三个项目： 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

尝试在项中指定默认值：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);

（题外话）另外，你不应该re-specify参数如：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);

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

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

wordpress

owl-carousel

owl-carousel-2