JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<script src="https://raw.githubusercontent.com/i-like-robots/EasyZoom/master/src/easyzoom.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/i-like-robots/EasyZoom/master/css/easyzoom.css">
	<div id="bigWraper">




<!--Wraper in the Left Side (Product Images)-->		
	<div id="leftBigWraper"><!-- Example -->	
			<div id="bigPicture">
				<div class="easyzoom easyzoom--overlay">
					<p><a href="http://llthumb.modnik.com/mod/sales/13541/products/super/Evan-Picone-Turtleneck-Sweater-Dress__01688224_black_1.jpg"></a></p>
						<img src="http://llthumb.modnik.com/mod/sales/13541/products/Evan-Picone-Turtleneck-Sweater-Dress__01688224_black_1.jpg" alt="" width="100%"/></div>

				<div class="easyzoom easyzoom--overlay">
					<p><a href="http://llthumb.modnik.com/mod/sales/13541/products/super/Evan-Picone-Turtleneck-Sweater-Dress__01688224_black_2.jpg"></a></p>
						<img src="http://llthumb.modnik.com/mod/sales/13541/products/Evan-Picone-Turtleneck-Sweater-Dress__01688224_black_2.jpg" alt="" width="100%"/></div>				
			</div>
		
	
			<div id="smallPicture">
				<img src="http://llthumb.modnik.com/mod/sales/13541/products/thumbs/Evan-Picone-Turtleneck-Sweater-Dress__01688224_black_1.jpg" width="100%">
				<img src="http://llthumb.modnik.com/mod/sales/13541/products/thumbs/Evan-Picone-Turtleneck-Sweater-Dress__01688224_black_2.jpg" width="100%">
			</div>
		
	</div><!-- End of Example -->
	<!--End of Wraper in the Left Side (Product Images)-->		

                
                
</div>

CSS

#bigWraper {
	width:80%;
	display:block;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
	
	
#leftBigWraper {
	width:47%;
	float: left;
	display:block;
	overflow: hidden;
	background: rgba(204, 204, 204); 
	position: relative;
	z-index: 300;
}

#bigPicture {
	width:79%;
	float: right;
	display:block;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	margin-left: 1%;
	margin: 0;
	padding: 0;
	height: 500px;
}


#bigPicture DIV {
	display:block;
	right: 0px;
	top: 0px;	
	overflow: hidden;
	height: auto;
	text-align: left;
	margin: auto;
}



#bigPicture img {
	margin-left: 0;
	float: left;
	margin-right: 0;
	margin-bottom: 10px;
	height: inherit;
	overflow: hidden;
}
	
#smallPicture {
	width:20%;
	margin-right: 0;
	float: left;
	display:block;
	overflow: hidden;
}
	
#smallPicture img {
	padding-bottom: 1px;
}

.easyzoom img {
	position: relative;
	z-index: 3000;
}

JavaScript

var $el = $('#leftBigWraper'),
    
//  SETUP  ////////
    F = 600 ,    // Fade Time
    P = 5000 ,   // Pause Time
    C = 0 ,      // Counter / Start Slide# (0 based)
///////////////////
    
    $sl = $('#bigPicture > div'),
    $th = $('#smallPicture > img'),
    N = $sl.length,
    T = 10000;

$sl.hide().eq(C).show();
$th.eq(C).addClass('on');


// ANIMATION
function anim() { 
  $sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
  $th.removeClass('on').eq(C%N).addClass('on');
}

// AUTO ANIMATE     
function autoAnim() {   
   T = setTimeout(function() {
      C++;
      anim();     // Animate
      autoAnim(); // Prepare another iteration
   }, P+F);
}
autoAnim();      // Start loop

// HOVER PAUSE
$el.hover(function(e) {
   return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});

// HOVER THUMBNAILS
$th.on('mouseenter', function() {
   C = $th.index( this );
   anim();
});




		// Instantiate EasyZoom plugin
		var $easyzoom = $('.easyzoom').easyZoom();
		// Get the instance API
		var api = $easyzoom.data('easyZoom');