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

Share Improve this question Follow edited Jan 5, 2017 at 21:03 Aibrean 6,42211 gold badge2323 silver badges3838 bronze badges asked Apr 15, 2015 at 10:27 LukasLukas 16922 gold badges44 silver badges1818 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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