Owl carousel full screen doesn't work

Question

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

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

Answer 1

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