Question

我正在尝试为我的网站制作猫头鹰旋转木马滑块全屏。这就是我需要的，随意调整浏览器的大小

这就是我所拥有的，

$(document).ready(function() {

  // carousel setup
  $(".owl-carousel").owlCarousel({
    navigation : false,
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem: true,
    autoHeight: true,
    afterMove: top_align,
  });

  function top_align() {
    $(window).scrollTop(0);
    console.log('move');
  }

});

有没有解决办法？

THX

Answer 1

试试这个：

html, body {
    height: 100%;
    margin: 0;
} 

.owl-wrapper-outer {
    height: 100% !important;    
}

.owl-wrapper {
     height: 100%;   
}

.owl-item {
    height: 100%;
}

.b-Amarelo {
    height: 100%;
}

.owl-item h1 {
    margin: 0;
}

演示：Fiddle

Answer 2

当使用％作为高度时，您必须沿着DOM链向下工作到子元素，以便应用高度。

另一个选择是利用vh单位。 100vh =窗口高度的100％。

只需将100vh添加到.owl-item和您的div项目。

.owl-item, .item {
    height: 100vh;
}

vh单位is defined as：

等于视口初始包含块高度的1％。

猫头鹰旋转木马全屏不起作用

2 个答案: