JSFiddle - React, Tailwind, and code Playground

HTML

<div class='slideItems'>
        <a class="slideItem"><img src="http://dummyimage.com/860x250/099/fff&text=1" /></a>
        <a class="slideItem"><img src="http://dummyimage.com/860x250/009/fff&text=2" /></a>
        <a class="slideItem"><img src="http://dummyimage.com/860x250/090/fff&text=3" /></a>                <a class="slideItem"><img src="http://dummyimage.com/860x250/900/fff&text=4" /></a>                <a class="slideItem"><img src="http://dummyimage.com/860x250/990/fff&text=5" /></a>
        <div class='controls'>
            <div class="item selected">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </div>

CSS

.slideItems .controls{
    width:858px;
    height:30px;
    position:absolute;
    bottom:0;
    right:0;
    background:#000;
    border:1px solid #999;           
}

.slideItems .controls .item{
    padding: 8px;
    height:30px;
    line-height:14px;
    float:left;
    border-right:1px solid #999;
    cursor:pointer;
    color:#333;
    text-decoration:none;
}
.slideItems .controls .selected{
    text-decoration:underline;
    color:#00f;
}
.slideItems .controls .item:hover{
    color:#900;
}

.slideItems{
    position:relative;
    overflow:hidden;
    margin:0 0 20px 0;
    clear:both;
}
.slideItems img,.slideItems a{
    float:left;
}
.slideItems .pauser{
    position:absolute;
    bottom:0;
    right:0;
    background:#000;
    padding:10px;
    color:#ff0;
    font-weight:bold;
    display:none;
}

JavaScript

//BEGIN jaySlider
//this would normally be in an external JS file
(function( $ ){
    $.fn.jaySlide= function(options) {
        var paused=false;
        var settings = {
            'width': '860px',
            'height': '280px',
            'showInterval' : 2000,
            'pauseInterval' : 3000,
            'pausedText' : 'Paused While Hovering',
            'backColor' : '#000',
            'textColor' : '#ff0',
            'pauseRadii' : '0 0 0 0',
            'pauseOpacity' : 1.0,
            'pauseMargin' : '0px'
        };        
        if ( options ) $.extend( settings, options );

        $(this).css('width', settings['width']).css('height', settings['height'])
         var container = $(this);
        var items = $(this).find('a');
        $(items).hide();
        $(items[0]).show();
        var tabs = $(this).find('.controls .item');
        var currentSlide=0;
        var timer = setTimeout(function(){
            doChange(false)
        }, settings['showInterval']);
        
        if (settings['pauseInterval'] > 0){
            
            var a = settings['pauseRadii'].split(" ");
            $(this).append('<div class="pauser">' + settings['pausedText'] + '</div>');
            $(this).find('.pauser')
                .css('background', settings['pauseBackColor'])
                .css('color', settings['pauseTextColor'])
                .css('-moz-border-top-left-radius', a[0])
                .css('-webkit-border-top-left-radius', a[0])
                .css('-moz-border-top-right-radius', a[1])
                .css('-webkit-border-top-right-radius', a[1])
                .css('-moz-border-bottom-right-radius', a[2])
                .css('-webkit-border-bottom-right-radius', a[2])
                .css('-moz-border-bottom-left-radius', a[3])
                .css('-webkit-border-bottom-left-radius', a[3])
                .css('opacity', settings['pauseOpacity'])
                .css('filter', 'alpha(opacity=' + ...