JSFiddle - React, Tailwind, and code Playground

HTML

<div class="det-sl-wrp">

                    <div class="mn-img">
                            <div class="sl-lft"></div>
                            <img class="full-img" src="img/img/1.jpg">
                            <div class="sl-rgh"></div>
                    </div>

                    <div class="thumb-wrp">
                        <div class="thm-img"><img src="img/img/1.jpg"></div>
                        <div class="thm-img"><img src="img/img/2.jpg"></div>
                        <div class="thm-img"><img src="img/img/3.jpg"></div>
                        <div class="thm-img"><img src="img/img/4.jpg"></div>
                        <div class="thm-img"><img src="img/img/1.jpg"></div>
                        <div class="thm-img"><img src="img/img/2.jpg"></div>
                        <div class="thm-img"><img src="img/img/3.jpg"></div>
                        <div class="thm-img"><img src="img/img/4.jpg"></div>
                    </div>

                </div>

CSS

.det-sl-wrp {
    display: block;
    width: 100%;
    height: 480px;
    background: #FFFFFF;
    border: 1px solid #fff;
    margin: 8px 0 8px 0;
}

.mn-img{
    position: relative;
    width: 650px;
    height: 100%;
    background: red;
    float: left;
    overflow: scroll;
}

.thumb-wrp{
    float: left;
    width: 145px;
    overflow-y: auto;
    height: 100%;
    margin: 0 0 0 8px;
}

.mn-img img{
    width: 100%;
    height: 100%;
}

.sl-lft, .sl-rgh{
    top: 0;
    right: 0;
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgba(0,0,0, 0);
}

.sl-rgh{
    left: 0;
}

.thm-img{
    width: 100%;
    display: block;
    height: 100px;
    margin: 2px 0 2px 0;
}

.thm-img img{
    width: 100%;
    height: 100%;
}

JavaScript

$(document).ready(function(){

	var thumb = $('.thm-img img');
	var outer = $('.mn-img');
	var full = $('.full-img');
	var count = $('.mn-img img').length;
	var sc_height = $(outer).height();

	$(thumb).mouseover(function(){
		console.log(count);
		$(full).hide();
		if( !$(this).hasClass('added') ){
			$(this).addClass('added').clone().insertAfter($(full));
			// $(outer).animate({scrollTop : sc_height + "px"},200);
		}
	});
});