JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thumbnails">
    <div class="thumbnailArrows"><img src="http://kimjoyfox.com/blog/wp-content/uploads/leftA.jpg" id="Tleft"/>
    </div>
<div id="window">
    <div id="imageHolder">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho1.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho2.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho3.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho4.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho5.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho6.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho7.jpg" alt="">
        <img src="http://kimjoyfox.com/blog/wp-content/uploads/drwho8.jpg" alt="">  
    </div>
</div>
    <div class="thumbnailArrows"><img src="http://kimjoyfox.com/blog/wp-content/uploads/rightA.jpg" id="Tright" />
    </div>
</div>

CSS

#thumbnails { width:300px; height:50px; margin-top:20px;}
#window { width:250px; height:50px; overflow:hidden; float:left; position:relative;}
#imageHolder { height:50px; position:absolute; top:0px; left:0px;}
#imageHolder img { width:35px; height:50px; float:left; margin-right:5px;}
#thumbnails .thumbnailArrows { width:25px; height:50px; float:left; }
#thumbnails .thumbnailArrows:hover {cursor:pointer; }

JavaScript

images = ['http://kimjoyfox.com/blog/wp-content/uploads/drwho8.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho7.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho6.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho5.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho4.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho3.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/dr-whos-tardis.png', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho9.jpg', 'http://kimjoyfox.com/blog/wp-content/uploads/drwho1.jpg'];

$(document).ready(function() {


    //setting the width of the imageHolder
    $('#imageHolder').css('width', images.length * 40);

    //adding images to the thumbnails
    $.each(images, function(index, value) {
        $('#imageHolder').append('<img src="' + value + '" />');
    });


    beginNow = setInterval(forwardImage, 4000);

    //Hovering Over Thumbnail Navigation
    $('.thumbnailArrows').hover(function() {
        var whiches = $(this).children('img').attr('id');
        if (whiches == 'Tleft') {
            movingThumbs(2000, '+');
        }
        else {
            movingThumbs(2000, '-');
        }
    }, function() {
        $('#imageHolder').stop();
    });


    //Function for Thumbnails Moving
    function movingThumbs(speed, direction) {
        var currentLeft = $('#imageHolder').position().left;
        //figure out how far to go left - only for right arrow
        var moving = $('#imageHolder').width() - (Math.abs($('#imageHolder').position().left) + $('#window').width());
        if (currentLeft == 0 && direction == '+') {
            //do nothing
        } else if (Math.abs($('#imageHolder').position().left) + $('#window').width() >= $('#imageHolder').width() && direction == '-') {
            //do nothing
        } else if (direction == '+' && currentLeft != 0) {
            $('#imageHolder').animate({
                left: 0,
            }, speed);
        } else {
            
           ...