javascript 猫头鹰轮播全屏不起作用

Owl carousel full screen doesn't work

提问by Lukas

I am trying to make owl carousel slider full screen for my site. This is what I need, feel free to resize Your browser

我正在尝试为我的网站制作 owl carousel 滑块全屏。这就是我需要的，随时调整浏览器的大小

And this is what I have,

这就是我所拥有的

fiddle

小提琴

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

});

is there any solution to fix it?

有什么解决方案可以解决吗？

Thx

谢谢

采纳答案by pqdong

Try this:

试试这个：

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

Demo: Fiddle

演示：小提琴

回答by Xavier Castaneda

When using % for heights, you have to work your way down the DOM chain to your child element for the height to apply.

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

Another option is to take advantage of vh units. 100vh = 100% of the window height.

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

Just add 100vh to .owl-item and your div item.

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

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

A vhunit is defined as:

一个vh单位定义为：

Equal to 1% of the height of the viewport's initial containing block.

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