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

问题描述

我在WordPress网站上遇到了有关Owl Carousel的问题。当我第一次访问该站点时，猫头鹰轮播会显示两个项目，而不是脚本中添加的三个项目。问题是我没有按原样显示这两个项目。如果是计划，而是第三项的两个和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,slideBy: 1
            },767:{
                items:2,slideBy: 2
            },1020:{
                items:3,slideBy: 3
            }
        }
    });
}); 

您可以检查站点here并在底部看到轮播（我正在该站点上工作，所以可能会有一些变化）。

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

解决方法

尝试在项中指定默认值：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,slideBy: 1
                },767: {
                    items: 2,slideBy: 2
                }
            }
        });
    });
})(jQuery);

（关闭主题）而且，您不应重新指定参数，例如： nav：true

(function($) {
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop: false,slideBy: 2
                }
            }
        });
    });
})(jQuery);

---

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

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