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/a.jpg">
                        <img class="full-img" src="img/img/b.jpg">
                        <img class="full-img" src="img/img/c.jpg">
                        <img class="full-img" src="img/img/d.jpg">
                        <img class="full-img" src="img/img/a.jpg">
                        <img class="full-img" src="img/img/c.jpg">
                        <img class="full-img" src="img/img/b.jpg">
                        <img class="full-img" src="img/img/d.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: #848f99;
    border: 1px solid #fff;
    margin: 8px 0 8px 0;
}

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

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

.mn-img img {
    float: left;
    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 {
    position: relative;
    width: 100%;
    display: block;
    height: 100px;
    margin: 2px 0 2px 0;
    box-sizing: border-box;
    transition: border 0.3s, left 0.3s;
    border: 1px solid #fff;
}

.thm-img:hover {
    border: 1px solid #E78211;
}

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

.numeric {
    color: #000;
    display: none;
    position: absolute;
    left: 49px;
    bottom: -1px;
    font-size: 10px;
    color: #fff;
    padding: 2px 0 0 0;
    line-height: 11px;
    width: 30px;
    z-index: 11;
    background-color: #E78211;
    text-align: center;
    font-family: sans-serif;
}

JavaScript

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


    thmb_wrap.one('mouseenter', function () {

        var cur_im = $('.thm-img img').index($(this).children('img')) + 1;
        $(this).append('<span class="numeric">' + cur_im + '/' + (full) + '</span>');

    });

    thmb_wrap.on('mouseenter', function () {
        $(this).children('.numeric').stop().fadeIn(0);
    });

    thmb_wrap.on('mouseout', function () {
        $('.numeric').stop().fadeOut(0);
    });

    $(thumb).mouseenter(function () {

        var images = $('.thm-img img'); // get images

        // move mouseover onto actual images otherwise you won't know which one is being moused over
        images.on('mouseenter', function () {

            var nm = images.index($(this));
            outer.stop().animate({scrollTop: (sc_height * nm) + "px"}, 0);

        });
    });