<div class="container" style="padding-top:50px;">
  <div class="owl-demo">
    <!-- <div class="slide-progress"></div> -->
    <div id="myCarousel" class="owl-carousel owl-theme">
      <div class="item owl-lazy" data-src="https://picsum.photos/991/601/?random">
        <div class="sliderContent">
          <div class="sliderContentInner">
            <i class="fab fa-android"></i>
            <h3>Here is an Awesome Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium accusamus suscipit natus voluptates</p>
            <p><a href="#" class="btn btn-default">LEARN MORE</a></p>
          </div>
        </div>
      </div>
      <div class="item owl-lazy" data-src="https://picsum.photos/991/602/?random">
        <div class="sliderContent">
          <div class="sliderContentInner">
            <i class="fab fa-apple"></i>
            <h3>Here is an Awesome Headline</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium accusamus suscipit natus voluptates</p>
            <p><a href="#" class="btn btn-default">LEARN MORE</a></p>
          </div>
        </div>
      </div>
      <div class="item owl-lazy" data-src="https://picsum.photos/991/603/?random">
        <div class="sliderContent bgLight">
          <div class="sliderContentInner">
            <i class="fab fa-windows"></i>
            <h3>Here is Another Awesome Headline</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium accusamus suscipit natus voluptates</p>
            <p><a href="#" class="btn btn-default">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
   </div>
</div>

*,*:focus {outline:none !important;}
body {background:#dddddd;font-family: 'Muli', sans-serif;}
.owl-carousel .owl-item {}
.owl-carousel .item.owl-lazy {background-size:150% auto;background-repeat:no-repeat;background-position:center center;position:relative;border-radius:6px;border:solid 1px #ddd;overflow:hidden;transition:background-size 3s ease;}
.owl-carousel .owl-item i.fab {display:inline-block;float:none;clear:both;background:rgba(0,0,0,.15);color:#fff;padding:6px;border-radius:100%;margin-bottom:3px;font-size:20px;margin-bottom:12px;transition:all .5s ease;}
.owl-carousel .owl-item.active .item.owl-lazy {background-size:calc(120% + 50px) auto !important;transition:background-size 3s ease .5s;}
.owl-carousel .owl-item.active i.fab {transition:all .5s ease 1s;}
.owl-carousel .owl-item.active .sliderContentInner {opacity:1;transition:all .8s ease .5s;}
.owl-theme .owl-dots .owl-dot {padding:0px;background:none;border:none;outline:none;}
.sliderContent {position:relative;padding-top:50%;display:block;color:#fff;background-image:linear-gradient(to top, #000000, transparent 55%);}
.sliderContent.bgLight {background-image:linear-gradient(to top, #fff, transparent 75%);color:#000 !important;}
.sliderContentInner {position:absolute;bottom:0px;left:0px;padding:45px 30px;font-size:16px;opacity:0;transition:all .5s ease;}
.sliderContentInner p.lead {line-height:1.3;}
.sliderContent h3 {font-size:24px;font-weight:700;}
.sliderContent .btn.btn-default {background:#06c;color:#fff;padding:6px 12px;font-size:12px;}
@media screen and (max-width:767px) {
.sliderContent h3 {font-size:20px;}  
.sliderContentInner {padding:25px 30px;}
.sliderContentInner p.lead {font-size:13px;}
}

* {outline:none;}
.owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.slide-progress {
  width: 0;
  max-width: 100%;
  height: 4px;
  background: #cc0000;
  position:relative;
  z-index:9;
  top:4px;
}

.owl-dot.active {position:relative;}
.owl-dot.active:after {
	animation:smProgressbar 5s ease forwards;
	position:absolute;
	top:5px;
	left:7px;
	content:'';
	height:4px;
	width:0px;
	background:#06c;
	z-index:2;
}
.owl-theme .owl-dots {
	position:relative;
	z-index:9;
	top:-40px;
}
.owl-theme .owl-dots .owl-dot span {
	width:30px;
	height:4px;
	border-radius:0px;
}

@keyframes smProgressbar {
0% {width:0px;}
100% {width:30px;}
}
@media screen and (max-width:767px) {
  p.lead {display:none;}
  .sliderContent {padding-top:68%;}
}

jQuery(document).ready(function(){
 
  //Initiate the slider
  initSlider();
  function initSlider() {
    $(".owl-carousel").owlCarousel({
      items: 1,
      loop: true,
      animateOut: 'fadeOut',
      autoHeight: false,
      autoplay: true,
      autoplayTimeout: 6000,
      autoplayHoverPause: true,
      dots: true,
      lazyLoad: true,
      onDrag: stopSlider
      // onInitialized: startProgressBar,
      // onTranslate: resetProgressBar,
      // onTranslated: startProgressBar
    });
  }
  
  // When the slider is dragged it will be stopped
  function stopSlider(event) {
    var heroPeepsSlider = $('#myCarousel');  
    heroPeepsSlider.trigger('stop.owl.autoplay'); 
  }

  // Progress Bars
  function startProgressBar() {
    $(".slide-progress").css({
      width: "100%",
      transition: "width 6000ms"
    });
  }
  function resetProgressBar() {
    $(".slide-progress").css({
      width: 0,
      transition: "width 0s"
    });
  }
});

// Add Keyboard Functionality
jQuery(document).keyup(function (event) {    
    var heroPeepsSlider = jQuery("#myCarousel");
    // handle cursor keys
    heroPeepsSlider.trigger('stop.owl.autoplay');
    if (event.keyCode == 37) {
       // go left
       heroPeepsSlider.trigger('prev.owl.carousel');
    } else if (event.keyCode == 39) {
       // go right
       heroPeepsSlider.trigger('next.owl.carousel');
    }
});