OWL carousel 2.0 with thumbnaiuls and zoom

by Petr Haluza

HTML

<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 src="https://www.jqueryscript.net/demo/Product-Zoom-On-Hover-Plugin-For-jQuery-imgZoom-js/jquery.imgzoom.js"></script>
<head> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css">
</head>


<div class="slide-cont">
  <div class="owl-carousel">
  <div class="imgBox"><img src="https://unsplash.it/300/300?image=659" data-origin="https://unsplash.it/660/660?image=659"></div>
    <div><img src="https://www.img4.cz/www/img/img?attid=1471000" data-zoom="https://www.img4.cz/www/img/imgsti?stiid=165587"></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>

CSS

html {height: 100%; width: 100%;}
.slide-cont {width: 400px; display: block; margin: 0 auto;}
.owl-stage-outer {width:400px; float:right;}
.owl-dots {position:absolute; width:150px;left:-150px;top:0; height:400px;}
.owl-dot {width:100px; height: 80px; float: left; background-size: cover; margin-top: 10px;}
.owl-dot.active {box-shadow:0 0 15px red;}



.imgBox{width: 300px;height: 300px;border: 1px solid #222;}

JavaScript

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    items: 1,
  });
}); 

jQuery( document ).ready(function() {
  
      // 1) ASSIGN EACH 'DOT' A NUMBER
			dotcount = 1;
	 
			jQuery('.owl-dot').each(function() {
			  jQuery( this ).addClass( 'dotnumber' + dotcount);
			  jQuery( this ).attr('data-info', dotcount);
			  dotcount=dotcount+1;
			});
			
			 // 2) ASSIGN EACH 'SLIDE' A NUMBER
			slidecount = 1;
	 
			jQuery('.owl-item').not('.cloned').each(function() {
			  jQuery( this ).addClass( 'slidenumber' + slidecount);
			  slidecount=slidecount+1;
			});
			
			// SYNC THE SLIDE NUMBER IMG TO ITS DOT COUNTERPART (E.G SLIDE 1 IMG TO DOT 1 BACKGROUND-IMAGE)
			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+")");  
      });
});

$('.imgBox').imgZoom({
            boxWidth: 400,
            boxHeight: 400,
            marginLeft: 5,
            origin: 'data-origin'
        });