如何解决在初始加载时显示两个项目而不是三个-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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。