Owl Carousel - Full width/height

index.html

<div id="owl-example" class="owl-carousel">
  <div class="owl-slide">
		<div class="owl--text">
		This is a full height Owl slider. There is nothing else interesting here!</div>
	</div>
  <div class="owl-slide">
		<div class="owl--text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
	</div>
  <div class="owl-slide">
		<div class="owl--text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam excepturi voluptate eveniet consectetur numquam laboriosam.
		</div>
	</div>
</div>

owl-carousel-full-width-height.markdown

Owl Carousel - Full width/height

A Pen by Ingvi on CodePen.

License.

script.js

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
		navigation : true, 
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true,
			pagination: false,
    	rewindSpeed: 500
	});
 
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

style.scss

.owl-carousel {
	position: relative;
	height: 100%;
	
	div:not(.owl-controls) {
		height: 100%;
	}
	
	.owl-slide {
		background-image: url('https://images.unsplash.com/photo-1437915015400-137312b61975?fit=crop&fm=jpg&h=800&q=80&w=1200');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	div.owl--text {
		position: absolute;
		bottom: 4em;
		left: 2em;
		width: 20em;
		height: 8em;
		padding: 1em;
		background: rgba(255, 255, 255, .5);
		border-radius: 4px;
	}
	
	.owl-controls {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		
		.owl-buttons {
			div {
				position: absolute;
				top: 0;
				bottom: 0;
				display: inline-block;
				zoom: 1;
				margin: 0;
				width: 50px;
				height: 30px;
				line-height: 25px;
				text-align: center;
				font-size: .9em;
				border-radius: 3px;
				color: #FFF;
				background: #000;
				opacity: .6;
				text-transform: capitalize;
			}
			
			.owl-prev {
				left: 5px;
			}
			
			.owl-next {
				right: 5px;
			}
		}
	}
}

body,
html {
	height: 100%;
}

body {
	margin: 0;
	font-family: futura, sans-serif;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" />