JSFiddle - React, Tailwind, and code Playground

by gall

HTML

<div class="sigProGalleriaPlaceholderContainer" id="slider-wrap">
    <ul id="slider">
        <li id="slide_1">
            <div class="sigProGalleriaPlaceholder"><a name="img" class="sigProGalleriaTargetLink"><img class="sigProGalleriaTargetImg" src="http://demo.meta.msk.ru/media/k2/galleries/13/4_123.jpg" alt=" "/></a>

            </div>
        </li>
        <li id="slide_2">
            <div class="sigProGalleriaPlaceholder"><a name="img" class="sigProGalleriaTargetLink"><img class="sigProGalleriaTargetImg" src="http://demo.meta.msk.ru/media/k2/galleries/13/4c_0dc9834a41b33d9.jpg" alt=" "/></a>

            </div>
        </li>
        <li id="slide_3">
            <div class="sigProGalleriaPlaceholder"><a name="img" class="sigProGalleriaTargetLink"><img class="sigProGalleriaTargetImg" src="http://demo.meta.msk.ru/media/k2/galleries/13/f_17b7491ee6a01b6ac31729e897367.jpg" alt=" " /></a>

            </div>
        </li>
    </ul>
    <div id="slider-controls"> <a href="#" id="slider-prev"><img src="http://demo.meta.msk.ru/images/l_st_a.png" alt="" onmouseover="this.src='http://demo.meta.msk.ru/images/l_st_n.png'" onmouseout="this.src='http://demo.meta.msk.ru/images/l_st_a.png'"/></a>
 <a href="#" id="slider-next"><img src="http://demo.meta.msk.ru/images/r_st_a.png" alt="" onmouseover="this.src='http://demo.meta.msk.ru/images/r_st_n.png'" onmouseout="this.src='http://demo.meta.msk.ru/images/r_st_a.png'"/></a>

    </div>
</div>
<ul id="sigProId" class="sigProGalleria">
		<li class="sigProThumb" id="tumb_1">
			<span class="sigProLinkOuterWrapper">
				<span class="sigProLinkWrapper">
					<a id="img_act" href="#" class="sigProGalleriaLink active" style="width:60px;height:36px;" target="_blank">
						<img class="sigProImg" src="http://demo.meta.msk.ru/cache/jw_sigpro/jwsigpro_cache_01f6f5fc5a_4_123.jpg" alt=" " style="width:60px;height:36px;background:url(http://demo.meta.msk.ru/cache/jw_sigpro/jwsigpro_cache_01f6f5fc5a_4_123.jpg);"...

CSS

a:active, a:focus {
    outline: 0 none;
}
table.contentpaneopen {
    width: 100%;
}
li.sigProClear {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: medium none !important;
    clear: both;
    float: none !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
}
div.sigProGalleriaContainer {
    float: left;
}
div.sigProGalleriaPlaceholderContainer {
    background: url("../images/loader.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    float: right;
}
div.sigProGalleriaPlaceholder {
}
ul.sigProGalleria {
    float: left;
    list-style: none outside none;
    margin-right: 15px;
    overflow: hidden;
    padding: 0;
    width: 70px;
}
ul.sigProGalleriaSingleThumb {
}
a.sigProGalleriaTargetLink {
    display: block;
}
a.sigProGalleriaTargetLink img {
    display: block;
    height: auto;
    width: 100%;
}
p.sigProGalleriaTargetTitle {
    color: #EEEEEE;
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    line-height: 120%;
    padding: 4px;
}
ul.sigProGalleria li.sigProThumb {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: medium none !important;
    float: left;
    margin: 5px 0;
    padding: 0;
}
ul.sigProGalleria li.sigProThumb span.sigProLinkOuterWrapper {
}
ul.sigProGalleria li.sigProThumb span.sigProLinkWrapper {
}
ul.sigProGalleria li.sigProThumb a.sigProLink, ul.sigProGalleria li.sigProThumb a.sigProLink:hover {
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
ul.sigProGalleria li.sigProThumb a.sigProLink {
    background-color: #555555;
    border: 4px solid #555555;
    color: #333333;
}
ul.sigProGalleria li.sigProThumb a.sigProLink:hover {
    background-color: #F4F2ED;
    border: 4px solid #F4F2ED;
    color: #EEEEEE;
    text-decoration: none;
}
ul.sigProGalleria li.sigProThumb...

JavaScript

jQuery.noConflict();
jQuery(document).ready(function ($) {
    // галерея
    var pos='';
    if (jQuery("#slider").length) {
     var fANUM=1;   
        // Declare variables
        var totalImages = jQuery("#slider > li").length,
            imageWidth = jQuery("#slider > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#slider-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth),
            allImages = totalWidth - (imageWidth);
        jQuery("#slider").width(totalWidth);
        jQuery("#slider").animate({
                    left: "+=" + allImages + "px"
                });     
     
        //element id
        var i = 0;
        var k = 0;
        jQuery("#slider li").each(function () {
            i++;
            $(this).attr("id", "slide_" + i);
        });
        jQuery("#sigProId li").each(function () {
            k++;
            $(this).attr("id", "tumb_" + k);
        });

        jQuery("#slider-prev").click(function () {
            if(fANUM!=1){
            fANUM--;
            var tbid="#tumb_"+fANUM; 
            jQuery(".active").removeClass('active');
            jQuery(tbid).find('a#img_act').addClass("active");        
            };
            if (jQuery("#slider").position().left < 0 && !jQuery("#slider").is(":animated")) {
                jQuery("#slider").animate({
                    left: "+=" + visibleWidth + "px"
                });
            }
            return false;
        });
        jQuery("#slider-next").click(function () {
            fANUM++; if(fANUM>3) fANUM=fANUM%3;
            var tbid="#tumb_"+fANUM; 
            jQuery(".active").removeClass('active');
             jQuery(tbid).find('a#img_act').addClass("active");

            if (jQuery("#slider").position().left > stopPosition && !jQuery("#slider").is(":animated")) {
               ...