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

例如，我有一个可隐藏的侧边栏菜单，该菜单增加了内容框的宽度，并弄乱了旋转木马的宽度。按钮触发器：

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

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

Answer 2

Yeiii

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

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

根据要求指定宽度

屏幕调整大小时猫头鹰轮播宽度问题

2 个答案: