JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.themediadock.com/jquery/fancybox/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://www.themediadock.com/jquery/fancybox/jquery.bxslider.css">
<script src="http://www,ucukltd.com/CMSPages/GetCSS.aspx?stylesheetname=uc"></script>
<div id="imageWrap">
<img src="http://www.ucukltd.com/productimages/kltf1403" alt="Main Image" id="mainImage" class="mainimage" onerror="this.src = 'http://www.ucukltd.com/website_images/no_image.jpg'" />
</div>
<!-- slider carousel -->
<div class="slider4">
<div class="slide">
<a href="http://www.ucukltd.com/productimages/kltf1403.jpg" class="thumbnail">
<img itemprop="image" class="smallThumb" src="http://www.ucukltd.com/productimages/kltf1403.jpg" />
</a>
</div>
<div class="slide1">
<a href="http://www.ucukltd.com/productimages/kltf1403_1.jpg" class="thumbnail">
<img itemprop="image" class="smallThumb" src="http://www.ucukltd.com/productimages/kltf1403_1.jpg" />
</a>
</div>
<div class="slide2">
<a href="http://www.ucukltd.com/productimages/kltf1403_2.jpg" class="thumbnail">
<img itemprop="image" class="smallThumb" src="http://www.ucukltd.com/productimages/kltf1403_2.jpg" />
</a>
</div>
<div class="slide3">
<a href="http://www.ucukltd.com/productimages/kltf1403_3.jpg" class="thumbnail">
<img itemprop="image" class="smallThumb" src="http://www.ucukltd.com/productimages/kltf1403_3.jpg" />
</a>
</div>
</div>
JavaScript
$(document).ready(function(){
$('img[src^="http://www.ucukltd.com/productimages/kltf1403_3.jpg"]').each(function () {
$(".slide3").remove();
});
$('.slider4').bxSlider({
slideWidth: 80,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});