全屏滑块与猫头鹰旋转木马

I have a big request for help with sth. I need to set the height to 100% of html & body for owl carousel slider (Full screen). But I need also a little bit place above it.

我有很大的帮助请求。我需要为owl carousel滑块(全屏)将高度设置为html和body的100%。但我还需要一点点。

This is what I did with other slider and what I need to have: http://lukaszradwan.com/

这就是我对其他滑块所做的以及我需要的东西:http://lukaszradwan.com/

And example with owl carousel http://lukaszradwan.com/pl/

例如,猫头鹰旋转木马http://lukaszradwan.com/pl/

Please resize Your browser vertically to see effect.

请垂直调整浏览器大小以查看效果。

Thank You!

EDIT//

It's almost done, but I have another issue. Below the slider there is an empty place, I don't know why lukaszradwan.com/pl

它差不多完成了,但我有另一个问题。滑块下面有一个空位,我不知道为什么lukaszradwan.com/pl

I need to have the same height to cd-main-content class as a viewport. Can You take a look?

我需要将cd-main-content类的高度设置为视口。你能看看吗?

$(document).ready(function() {

  // carousel setup
  $(".owl-carousel").owlCarousel({
    navigation : true,
    slideSpeed : 300,
    pagination : true,
    paginationSpeed : 400,
    singleItem: true,
    autoHeight: true,
    afterMove: top_align,
    navigationText : false,
    afterAction: function(current) {
    current.find('video').get(0).play();
}
  });

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

});
$(window).scroll(function(){
  if ($(this).scrollTop() > 50) {
      $('.owl-pagination').addClass('hidden');
  } else {
      $('.owl-pagination').removeClass('hidden');
  }
});

1 个解决方案

#1

I just added

我刚才补充道

position: absolute;
top: 289px;
bottom: 0;
left: 0;
right: 0;

to viewport and margin-bottom: 289px; to cd-main-content and everything works well.

to viewport和margin-bottom:289px; cd-main-content,一切运作良好。

#1