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,

$(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

Isn't this the same question as - http://stackoverflow.com/questions/29629780/owl-carousel-100-height — Paulie_D, Apr 15 '15 at 10:36

score 1 · Answer 1 · edited Aug 03 '17 at 18:44

1

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.

edited Aug 03 '17 at 18:44

msanford

11,803
11
66
93

answered Aug 03 '17 at 18:22

Xavier Castaneda

11
1

score 0 · Accepted Answer · answered Apr 15 '15 at 10:45

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

Owl carousel full screen doesn't work

2 Answers2