JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider_mask">     
    <div id="slider" name="s1">
        <a href="http://www.motooption.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/motooption.jpg"></a>         
        <a href="http://www.mxsimulator.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/mxsimulator.jpg"></a>         
        <a href="http://www.oneindustries.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/one.jpg"></a>         
        <a href="http://www.racetech.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/racetech.jpg"></a>         
        <a href="http://www.facebook.com/TwoWheelersGraphicsCo" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/twg.jpg"></a>   
        <a href="http://www.vurbmoto.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/vurbmoto.jpg"></a>
        <a href="http://www.novikgloves.com" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/novik.jpg"></a>
        <a href="http://www.taggerdesign.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/tagger.jpg"></a>
        <a href="http://www.limiteddecal.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/limiteddecal.jpg"></a>
        <a href="http://www.evs-sports.com/" target="_blank"><img src="http://www.racefactorygaming.com/images/slider/evs.jpg"></a>
    </div>
</div> <!-- end slider mask -->

CSS

#slider_mask {
    height: 48px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    width: 930px;
}
#slider {
    display: inline;
    height: 48px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
    white-space: nowrap;
}
#slider img {
    height: 48px;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0;
}

JavaScript

$(document).ready(function() {
    var speed = 75; //px per sec

    var width = $('#slider').outerWidth();

    $('#slider').append($('#slider').children().clone());

    function slide() {
        var curleft = $('#slider').position().left;
        var duration = (width+curleft) * 1000 / speed;
        $("#slider").animate({
            left: "-" + width + "px"
        }, duration, "linear", function() {
            $(this).css("left", "0px");
            slide();
        });
    }

    $("#slider").hover(function() {
        $('#slider').stop();
    }, function() {
        slide();
    });

    slide();
});