Skip to content

Instantly share code, notes, and snippets.

@scarletish
Created March 13, 2020 09:22
Show Gist options
  • Save scarletish/28db8872c204a13ba8dc753cca25da78 to your computer and use it in GitHub Desktop.
Save scarletish/28db8872c204a13ba8dc753cca25da78 to your computer and use it in GitHub Desktop.
Owl Carousel - Full width/height
<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>
$(document).ready(function() {
$("#owl-example").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
pagination: false,
rewindSpeed: 500
});
});
<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>
.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;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment