<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css
" />
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css
" />
<script async src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.js
"></script>
<!-- / photos from stocksnap.io -->
<div class='owl-carousel' id='owlCarousel'>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/30LJYJGOMY.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>Welcome</h3>
<h2>Mea Vocibus Eloquentiam</h2>
<p>erant aperiri sapientem senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem</p>
</div>
</div>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/9UX9KSL4AB.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>Welcome</h3>
<h2>Aperiri Sapientem</h2>
<p>Nam ante est, euismod id consequat eget, congue et lacus, Sed consequat laoreet purus.</p>
</div>
</div>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/DI64TAJTIS.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>Aliquid Interpretari</h3>
<h2>Erant Aperiri</h2>
<p>Nam ante est, euismod id consequat eget, congue et lacus. Sed consequat laoreet purus, efficitur semper turpis pretium vitae.</p>
</div>
</div>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/QMA508CSJ4.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>Sed finibus malesuada</h3>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Sed finibus malesuada sem sed placerat. Sed id neque mattis dui hendrerit mattis. Etiam ultrices varius risus.</p>
</div>
</div>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/QJ82DCZS1A.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>euismod mauris pretium</h3>
<h2>consectetur adipiscing elit</h2>
<p>Nam in nulla varius, sagittis ipsum a, hendrerit nisi. Nulla aliquet ligula id sem eleifend, nec tempus nulla lacinia.</p>
</div>
</div>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/IWWC5CHVYK.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>tempus nulla lacinia</h3>
<h2>consequat felis nibh</h2>
<p>In blandit lorem ut ante cursus pharetra. Nulla ultrices, metus vehicula tristique sagittis, lectus dui fermentum quam.</p>
</div>
</div>
<div class='slide'>
<img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5607D011AC.jpg'>
<div class='slide-content'>
<div class='overlay'></div>
<h3>Nam consequat felis</h3>
<h2>aliquet mi vestibulum</h2>
<p>Maecenas euismod mauris pretium nibh vestibulum pellentesque. Sed porta malesuada viverra, Pellentesque egestas faucibus turpis.</p>
</div>
</div>
</div>
<script>
$(document).ready(()=> {
'use strict';
var owl = $('.owl-carousel'),
item,
itemsBgArray = [], // to store items background-image
itemBGImg;
owl.owlCarousel({
items: 1,
smartSpeed: 1000,
autoplay: true,
autoplayTimeout: 8000,
autoplaySpeed: 1000,
loop: true,
nav: true,
navText: false,
onTranslated: function () {
changeNavsThump();
}
});
$('.active').addClass('anim');
var owlItem = $('.owl-item'),
owlLen = owlItem.length;
/* --------------------------------
* store items bg images into array
--------------------------------- */
$.each(owlItem, function( i, e ) {
itemBGImg = $(e).find('.owl-item-bg').attr('src');
itemsBgArray.push(itemBGImg);
});
/* --------------------------------------------
* nav control thump
* nav control icon
--------------------------------------------- */
var owlNav = $('.owl-nav'),
el;
$.each(owlNav.children(), function (i,e) {
el = $(e);
// append navs thump/icon with control pattern(owl-prev/owl-next)
el.append('<div class="'+ el.attr('class').match(/owl-\w{4}/) +'-thump">');
el.append('<div class="'+ el.attr('class').match(/owl-\w{4}/) +'-icon">');
});
/*-------------------------------------------
Change control thump on each translate end
------------------------------------------- */
function changeNavsThump() {
var activeItemIndex = parseInt($('.owl-item.active').index()),
// if active item is first item then set last item bg-image in .owl-prev-thump
// else set previous item bg-image
prevItemIndex = activeItemIndex != 0 ? activeItemIndex - 1 : owlLen - 1,
// if active item is last item then set first item bg-image in .owl-next-thump
// else set next item bg-image
nextItemIndex = activeItemIndex != owlLen - 1 ? activeItemIndex + 1 : 0;
$('.owl-prev-thump').css({
backgroundImage: 'url(' + itemsBgArray[prevItemIndex] + ')'
});
$('.owl-next-thump').css({
backgroundImage: 'url(' + itemsBgArray[nextItemIndex] + ')'
});
}
changeNavsThump();
});
</script>
html,body{
width: 100%;
height: 100%;
}
/* sliders container */
#owlCarousel,
.owl-stage-outer,
.owl-stage,
.owl-item-bg,
.owl-item {
height: 100%;
min-height: 200px;
}
#owlCarousel{
width: 100%;
overflow: hidden;
position: relative;
}
#owlCarousel:hover .owl-nav{
opacity: 1;
}
/* slider container */
.owl-item {
display: inline-block;
width: 100%;
overflow: hidden;
-webkit-backface-visibility: hidden;
/* -webkit-transform: translateZ(0) scale(1.0, 1.0); */
}
.owl-item .owl-item-bg {
width: 100%;
display: inline-block;
position: absolute;
background-size: 100% 100%;
background-position: center center;
}
/* previus/next slider control container */
.owl-nav {
position: absolute;
top: 50%;
transform: translateY(-80px);
left: 0;
right: 0;
opacity: 0;
transition: all .3s;
}
/* previus/next slider control*/
.owl-prev,
.owl-next {
width: 200px;
height: 100px;
line-height: 70px;
position: absolute;
top:50%;
transform: translateY(50%);
/* border-radius: 4px; */
overflow: hidden;
transition: all 1s ease
}
/* previus slider control*/
.owl-prev {
left: 10px;
}
/* next slider control*/
.owl-next {
right: 10px;
}
/* slider controls thump image and icon */
.owl-prev-thump,
.owl-prev-icon,
.owl-next-thump,
.owl-next-icon {
height: 100%;
}
/* slider controls thump image */
.owl-prev-thump,
.owl-next-thump {
width: 100%;
background-size: cover;
transition: all 1s ease-in-out;
image-rendering: -webkit-optimize-contrast;
}
/* slider previous/next controls icon */
.owl-prev-icon,
.owl-next-icon {
width: 40%;
height: 100%;
background-color: rgba(0,0,0,.4);
position: absolute;
top: 0;
padding-top: 8%;
text-align: center;
transition: all 1s ease;
}
/* slider previous/next fontawsome icon */
.owl-prev-icon:before,
.owl-next-icon:before {
font-family: FontAwesome;
color: rgba(255,255,255,.7);
font-size: 30px;
transition: all 1s ease
}
/* left arrow */
.owl-prev-icon:before {
content: '\f104';
}
/* right arrow */
.owl-next-icon:before {
content: '\f105';
}
.owl-prev-icon {left: 0;}
.owl-next-icon {right: 0}
/*-----------
nav hover
------------*/
/* prevent animation when disabling loop mode
.owl-next:not(.disabled):hover
*/
.owl-prev:hover,
.owl-next:hover {
animation: navShadow 4s ease-in-out infinite;
}
.owl-prev:hover .owl-prev-icon,
.owl-next:hover .owl-next-icon {
width: 25%;
}
@keyframes navShadow {
0%, 100% {box-shadow: 0px 0px 1px 0 #f1f1f1;}
50% {box-shadow: 0px 0px 5px 0 #f1f1f1}
}
.owl-prev.disabled:hover ,
.owl-next.disabled:hover {
animation: none;
}
.owl-prev.disabled:hover .owl-prev-icon,
.owl-next.disabled:hover .owl-next-icon {
width: 50%;
}
/*-----------------------------------
Owl content styling
-----------------------------------*/
.slide-content {
position: absolute;
right: 0;
top: 35%;
width: 45%;
height: 300px;
padding: 70px 70px 0;
text-align: center;
/* transform: translate(-50%,-50%) rotate3d(1, 0, 0, -90deg); */
transform-origin: top;
background-color: rgba(0,0,0,.4);
/* -webkit-clip-path: polygon(0 0 , 100% 0 , 90% 100% , 10% 100% ); */
color: #fff;
/* font-size: 2em; */
}
.slide-content,
.slide-content h3,
.slide-content h2,
.slide-content p,
.slide-content h3:before,
.slide-content h3:after {
transition: all 2s ease;
}
.slide-content h3 {
position: relative;
display: inline-block;
text-transform: uppercase;
color: rgba(255,255,255,.95);
/* transform: translate3d(-100%, 0,1px); */
}
.slide-content h3:before,
.slide-content h3:after {
content: '';
display: block;
width: 70px;
height: 2px;
position: absolute;
top: 49%;
background-color: #f1f1f1;
}
.slide-content h3:before {
left: -90px;
/* transform: translate3d(-700%, 0, 1px) */
}
.slide-content h3:after {
right: -90px;
/* transform: translate3d(700%, 0, 1px) */
}
.slide-content h2 {
color: #f9f9f9;
/* font-size: 1.3em; */
margin-top: 15px;
margin-bottom: 20px;
text-transform: uppercase;
/* transform: translate3d(100%, 0,1px); */
}
.slide-content p {
/* font-size: .6em; */
/* padding: 0 190px; */
line-height: 1.4em;
letter-spacing: 1px;
text-transform: capitalize;
color: rgba(255,255,255,.8);
/* transform: translate3d(0, 400%,1px); */
}
/* animate content */
.owl-item.active .slide-content {
transform: translate(-20%, 0%) rotate3d(1, 0, 0, 0);
transition-delay: .7s
}
.owl-item.active h3,
.owl-item.active h2,
.owl-item.active p,
.owl-item.active h3:before,
.owl-item.active h3:after {
transform: translate3d(0, 0,1px);
transition-delay: 1s
}
