JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="product_nav">	
    <a id="prevslide" class="" style="display: block;" href="#">prev</a>
	<a id="nextslide" class="" style="display: block;" href="#">next</a>
</div>
<div id="thumb-tray" class="load-item" style="display: block; bottom: -150px;">
    <ul id="thumb-list" style="">
        <li class="thumb0">
            <img src="img/thumbs/hamurlu_1.png"/>
        </li>
        <li>
            <img src="img/thumbs/hamurlu_2.png"/>
        </li>
        <li>
            <img src="img/thumbs/hamurlu_3.png"/>
        </li>
        <li class="thumb3 current-thumb">
            <img src="img/thumbs/hamurlu_4.png" />
        </li>
        <li>
            <img src="img/thumbs/hamurlu_2.png" />
        </li>
    </ul>
</div>

CSS

#thumb-tray {
    position: absolute;
	top: 90px;
	width: 100%;
	padding: 0 10%;
	overflow: hidden;
}
#thumb-list{
    white-space: nowrap;
	overflow: hidden;
}

#thumb-list li {
    list-style-type: none;
	display: inline-block;
	width: 18%;
	margin: 1%;
}
img {
    position:relative;
}

JavaScript

jQuery(function ($) {
		    $("#nextslide").click(function (e) {
		        $("img").animate({
		            left: "-=150px",
		        }, "slow");
		    });
		    $("#prevslide").click(function (e) {
		        $("img").animate({
		            left: "+=150px",
		        }, "slow");
		    });
		});