JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="imageSlider">
    <div id="prev">
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/prev.png" width="40px" />
    </div>
    <div id="next">
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/next.png" width="40px" />
    </div>
    <div id="sliderWrapper">
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
    </div>
</div>

CSS

#sliderWrapper {
    left: 40px;
    width: calc(100% - 80px);
    white-space: nowrap !important;
    height: 100%;
    position: relative;
    background: #999;
    overflow-x: hidden;
}
img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#next {
    height: 100%;
    position: absolute;
    right: 0;
    background: #555;
    z-index: 1;
}
#prev {
    height: 100%;
    position: absolute;
    left: 0;
    background: #555;
    z-index: 1;
}
#imageSlider {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
}
::-webkit-scrollbar {
    display: none;
}

JavaScript

function loopNext(){
    $('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext);
}

function loopPrev(){
    $('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev);
}

function stop(){
    $('#sliderWrapper').stop();
}


$('#next').hover(function () {
   loopNext();
},function () {
   stop();
});

$('#prev').hover(function () {
   loopPrev();
},function () {
   stop();
});