As per my understanding, you are looking to have a container that spans full height and width on both Desktop and Mobile using Owl Carousel.
I have created a Pen to assist you in achieving your goal with Owl Carousel - although I am not very familiar with it since I no longer use Carousels frequently, it can be a helpful solution for carousels!
https://codepen.io/kurtis-rogers/full/NozyEz
Here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Owl Carousel 2 Example</title>
</head>
<body>
<div class="owl-carousel">
<div class="post-content-parent">
<div class="c--post-content-image-wrapper"></div>
<div class="post-content-text-child">
<div class="post-content--inner">
<h2>Slider 1</h2>
<p>Some information about slider 1</p>
</div>
<input type="button" value="Read more">
</div>
</div>
<div class="post-content-parent">
<div class="c--post-content-image-wrapper"></div>
<div class="post-content-text-child">
<div class="post-content--inner">
<h2>Slider 1</h2>
<p>Some information about slider 1</p>
</div>
<input type="button" value="Read more">
</div>
</div>
</div>
</body>
</html>
CSS(SCSS):
body, html{
padding: 0;
margin: 0;
}
.owl-carousel, .owl-stage-outer {
max-height: 100%;
height: 100vh;
}
// Parent container for the images and text
.post-content-parent{
display: flex;
width: 100%;
height: 100vh;
position: relative;
}
// Post content image styles
.c--post-content-image-wrapper{
position: absolute;
width: 100%;
height: 100vh;
top: 0;
bottom: 0;
background: url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
// Post text content
.post-content-text-child{
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.7);
z-index: 1;
padding: 20px 0;
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0;
width: 100%;
height: auto;
.post-content--inner {
padding-left: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-weight: lighter;
}
h2, p {
margin: 0;
}
input[type="button"] {
margin-right: 20px;
}
}
JavaScript:
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop: true,
items: 1,
center: true,
lazyLoad: true,
dots: false
});
});
If you require any assistance with this, feel free to reach out :)