调整屏幕大小时owl轮播宽度问题

Question

我使用owl.carousel在drupal站点中制作旋转木马。

我有3个框在第一时间和下一个和前一个箭头在那里，但JS本身增加了它的宽度为猫头鹰-项目，而屏幕调整大小而不是3个框来4个框来，其中相互重叠。

我试着用!important给出宽度，但是它的包装器宽度是动态的，我不能改变它。

请给我解决方案，删除JS宽度或宽度应该像这样适用于屏幕调整框不应重叠，并显示3个框。

Answer 1

您可以在每次调整窗口大小时触发此函数：

function owlres() {
    var $carousel = $('.owl-carousel');  
    if($carousel.length>0)  {   
        $carousel.data('owl.carousel')._invalidated.width = true;
        $carousel.trigger('refresh.owl.carousel');
    }
}

例如，我有一个可以隐藏的侧边栏菜单，它增加了内容框的宽度，并扰乱了owlcarousel的宽度。按钮触发器：

$("#sidebar-toggle").on('click',function(){
            owlres();
        })

来源：https://github.com/OwlCarousel2/OwlCarousel2/issues/842

Answer 2

是啊

我得到了答案，希望这对你们任何人都有帮助

jQuery(".owlCarousel").owlCarousel({
        navigation:true,
        itemElement:'.views-row',
        items : 3,
        itemsMobile : [768,1],
        itemsDesktop : [1500,3],
        rewindNav:false,
        navigationText: false
      });

根据需要指定宽度

Answer 3

在$(window).load()函数上初始化owl carousal。

$(window).on('load', function (){
    $('.owl-carousel').owlCarousel({...});
});

它解决了我的问题。