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

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

• javascript
• css
• height
• carousel
• fullscreen

• Isn't this the same question as - stackoverflow./questions/29629780/owl-carousel-100-height – Paulie_D Commented Apr 15, 2015 at 10:36
• No, the current version of owl carousel is 1.33 – Lukas Commented Apr 15, 2015 at 10:43

2 Answers 2

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

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

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

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

A vh unit is defined as:

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

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