JSFiddle - React, Tailwind, and code Playground

HTML

<div class=gallery_outer>
    <div class="gallery_inner">
        <ul class="full_img">
            <li><img src="fullSize_image/1.jpg" alt="1"/></li>
            <li><img src="fullSize_image/2.jpg" alt="2"/></li>
            <li><img src="fullSize_image/3.jpg" alt="3"/></li>
            <li><img src="fullSize_image/4.jpg" alt="4"/></li>
            <li><img src="fullSize_image/5.jpg" alt="5"/></li>
            <li><img src="fullSize_image/6.jpg" alt="6"/></li>
        </ul>
    </div>
    <div class="thumbs_wrapper">        
        <ul class="thumbs">
            <li><img src="thumbnails/1.jpg" class="image1"/></li>
            <li><img src="thumbnails/2.jpg" class="image2"/></li>
            <li><img src="thumbnails/3.jpg" class="image3"/></li>
            <li><img src="thumbnails/4.jpg" class="image4"/></li>
            <li><img src="thumbnails/5.jpg" class="image5"/></li>
            <li><img src="thumbnails/6.jpg" class="image6"/></li>
        </ul>
    </div>
</div>

CSS

.gallery_outer{
    margin:15px;
    width:390px;
    height:430px;
    border:5px solid #aaa;
    border-radius:10px;
    webkit-border-radius:10px;
    box-shadow:2px 2px 5px 3px;
    -moz-box-shadow:2px 2px 5px 3px;
    webkit-box-shadow:2px 2px 5px 3px;

}
.gallery_inner{

}
.full_img{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    height:282px;
    width:17296px;
    overflow: hidden;
    /*left:-384px;*/
}
.full_img li{
    display:inline;
    float:left;
    margin-left:0 !important;
    padding:9px 8px;
    position: absolute;
    width:376px;
    height:282px;
}
.full_img li img{
    width:376px;
}
.thumbs_wrapper{
    margin:0;
    padding:0;
    height:108px;
    width:324px;
    overflow:hidden;
    float:left;
}
.thumbs{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    /*width:5336px;*/
    width:668px;
    /*left:-108px;*/
}
.thumbs li{
    display:inline;
    float:left;
    margin-left:0 !important;
    padding:9px 8px;
    width:100px;
    height:100px;
}
.thumbs li img{
    width:100px;
    height:100px;
    cursor:pointer;
}
.active{
    border:5px solid red;
}

JavaScript

$(function() {
    var $thumbs = $('div.thumbs_wrapper');
    var scrollWidth = $('ul.thumbs li').width();
    var $single_Item = $('ul.thumbs li:first');

    singleWidth = $single_Item.outerWidth();
    scrollRight = singleWidth;

    setInterval(function() {
        sliding();
    }, 1000);

});

function sliding() {
    var $thumbs = $('div.thumbs_wrapper');
    var scrollWidth = $('ul.thumbs li').width();
    $thumbs.animate({
        'scrollLeft': '+=' + singleWidth
    }, 'slow', function() {
        if ($thumbs.scrollLeft() >= $thumbs.innerWidth()) {
            setTimeout(function() {
                $thumbs.animate({
                    'scrollLeft': '=0'
                }).scrollLeft(0);
            }, 1000);
        }
    });
}