Skip to content

Instantly share code, notes, and snippets.

@faizahmaddae
Created May 27, 2019 04:08
Show Gist options
  • Save faizahmaddae/6fd35932d3e0c104bb41b27b44a723df to your computer and use it in GitHub Desktop.
Save faizahmaddae/6fd35932d3e0c104bb41b27b44a723df to your computer and use it in GitHub Desktop.
Owl Carousel 2 Full Width/Height Example
<!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 slider-image-2"></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 2</h2>
<p>Some information about slider 2</p>
</div>
<input type="button" value="Read more">
</div>
</div>
</div>
<div>
Some other content
</div>
</body>
</html>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop: true,
items: 1,
center: true,
lazyLoad: true,
dots: false
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
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;
.slider-image-2 {
background: url("https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}
// 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;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment