I have a little problem with owl carousel 2,
This is the old version of my site, http://lukaszradwan.com/pl/ please take a look at the main slider. This is not owl carousel, I don't know what it is but it works fine (height is set to 100%) - and it's too heavy.
I have changed it to owl carousel, see this http://lukaszradwan.com/ It's responsive but I can't set height to 100%.
JS
$('.owl-carousel').owlCarousel({
items:1,
margin:0,
loop:true,
nav:true
});
HTML
<div class="slider_container">
<div class="owl-carousel">
<div class="item"><img src="img/banners/slajd.jpg" alt="The Last of us"> </div>
<div class="item"><img src="img/banners/slajd.jpg" alt="The Last of us"></div>
<div class="item"><img src="img/banners/slajd.jpg" alt="The Last of us"></div>
</div>
</div>
</div>
If You have any ideas how to do this, please share with me. Thanks in advance.
I solved the 100% height problem on mobile with css. I know this is not the best solution but it works so far ...
.header-carousel.owl-carousel.owl-theme.owl-loaded.owl-drag,
.header-carousel .owl-stage-outer,
.header-carousel .owl-stage,
.header-carousel .owl-item,
.header-carousel .item,
.header-carousel .owl-item,
.header-carousel .img-responsive{
height: 100vh;
object-fit: cover;
}