Слайдер owl-carousel

html { 
  height: 100%; 
  width: 100%; 
} 
 
.slide-cont { 
  width: 600px; 
  display: block; 
  margin: 0 auto; 
} 
 
.owl-carouse div { 
  width: 100%; 
} 
 
.owl-carousel .owl-controls .owl-dot { 
  float: left; 
  background-size: cover; 
  margin-top: 10px; 
} 
 
body { 
  background-color: #1f1f1f; 
  background: -webkit-radial-gradient(#1f1f1f, #000000); 
  background: radial-gradient(#1f1f1f, #000000); 
} 
 
.owl-carousel { 
  text-align: center; 
} 
 
.owl-carousel .owl-dot { 
  display: inline-block; 
  float: left; 
  background-size: cover; 
  max-width: 50px; 
  max-height: 50px; 
  outline: 4px solid red; 
  margin-left: 20px; 
  margin-top: 20px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script> 
<script> 
  $(document).ready(function() { 
    $(".owl-carousel").owlCarousel({ 
 
      items: 1, 
 
 
    }); 
  }); 
 
 
 
  jQuery(document).ready(function() { 
 
 
 
    dotcount = 1; 
 
    jQuery('.owl-dot').each(function() { 
      jQuery(this).addClass('dotnumber' + dotcount); 
      jQuery(this).attr('data-info', dotcount); 
      dotcount = dotcount + 1; 
    }); 
 
    slidecount = 1; 
 
    jQuery('.owl-item').not('.cloned').each(function() { 
      jQuery(this).addClass('slidenumber' + slidecount); 
      slidecount = slidecount + 1; 
    }); 
 
    jQuery('.owl-dot').each(function() { 
 
      grab = jQuery(this).data('info'); 
 
      slidegrab = jQuery('.slidenumber' + grab + ' img').attr('src'); 
      console.log(slidegrab); 
 
      jQuery(this).css("background-image", "url(" + slidegrab + ")"); 
 
    }); 
 
    amount = jQuery('.owl-dot').length; 
    gotowidth = 100 / amount; 
 
    jQuery('.owl-dot').css("width", gotowidth + "%"); 
    newwidth = jQuery('.owl-dot').width(); 
    jQuery('.owl-dot').css("height", newwidth + "px"); 
 
 
 
  }); 
</script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css"> 
 
<div class="slide-cont"> 
  <div class="owl-carousel"> 
    <div><img src="http://imew.co.uk/wp-content/uploads/2017/03/cav1-1.png"></div> 
    <div><img src="http://imew.co.uk/wp-content/uploads/2017/03/cav2-1.png"></div> 
    <div><img src="http://imew.co.uk/wp-content/uploads/2017/03/cav3-1.png"></div> 
    <div> <img src="http://imew.co.uk/wp-content/uploads/2017/03/cav4-1.png"></div> 
  </div> 
</div>