在初始加载时显示两个项目，而不是三个-WordPress/Owl旋转木马

Question

我在Wordpress网站上遇到了一个关于猫头鹰旋转木马的问题。当我第一次访问该网站时，猫头鹰旋转木马显示了两个项目，而不是脚本中添加的三个项目。问题是我没有按应有的方式显示这两个项目。如果是计划，而是第三项的二分之一和六分之一：猫头鹰转盘问题(2个项目有点第三(

当我重新加载/刷新网站时，它会显示三个项目：猫头鹰旋转木马。

我的脚本：

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

你可以在这里查看网站，并在底部看到旋转木马(我正在网站上工作，所以可能会有一些更改(。

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

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

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