JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kthornbloom.com/slydeshow/js/jquery.easing.1.3.js"></script>
<div class="slydeshow">
    <div class="slyde_stage">
        <div class="specular"></div>
        <div class="slyde_items">
            <img src="http://kthornbloom.com/slydeshow/images/1.jpg" width="450" height="300" /><img src="http://kthornbloom.com/slydeshow/images/2.jpg" width="450" height="300" /><img src="http://kthornbloom.com/slydeshow/images/3.jpg" width="450" height="300" /><img src="http://kthornbloom.com/slydeshow/images/4.jpg" width="450" height="300" />
        </div>
    </div>
</div>

CSS

body {
    background:#6B0B0B;
    padding:15px;
}

.slydeshow {
position:relative;
box-shadow:0px 5px 20px #450707;
-webkit-box-reflect: below 5px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
  color-stop(0.85, transparent), 
  to(rgba(255, 255, 255, .3)));
}

.slyde_stage {
border-radius:2px;
position:relative;
overflow:hidden;
}

.specular {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 100;
    width: 461px;
    height: 250px;
    background: -moz-linear-gradient(-50deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 50.1%) no-repeat;
    background: -webkit-linear-gradient(-50deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 50.1%) no-repeat;
    background: linear-gradient(-50deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 50.1%) no-repeat;
    background-position: -410px -300px;
    -moz-background-size: 1000px 1200px;
    background-size: 1000px 1200px;
    -webkit-background-size: 1000px 1200px;
    -moz-mask: -moz-linear-gradient(top, #fff, transparent 50%);
    -webkit-mask: -webkit-linear-gradient(top, #fff, transparent 50%);
    mask: linear-gradient(top, #fff, transparent 50%);
}

.slyde_items {
position:absolute;
height:300px;
white-space:nowrap;
left:0;
}

.slyde_pagination {
    background:rgba(255,255,255,.9);
    padding:0px;
    margin:0px;
    text-align:center;
    position:absolute;
    width:100%;
    bottom:0;
}

.slyde_pagination li {
    display:inline-block;
    width:12px;
    margin:5px 6px;
}
.slyde_pagination a:link {
    display:inline-block;
    outline:none;
    height:14px;
    width:14px;
    background:url(http://kthornbloom.com/slydeshow/images/pagination.png) 0px 0px;
    text-indent:-9999px;
    overflow:hidden;
    border-radius:10px;
}
.slyde_pagination a:hover {
background-position:0px -14px;
}

.current_slyde {
background-position:0px 14px!important;
box-shadow: 0px 0px 0px 5px...

JavaScript

$(document).ready(function() {

// ***** SET VARS *****
var imgWidth = $(".slyde_items img:first-child").width();
var imgHeight = $(".slyde_items img:first-child").height();
var countItems = $(".slyde_items").children().length;
var countStarter = 0;
var slideTime = 3500;
var animationTime = 1000;
var interval = setInterval(playForward, slideTime);
var interval2 = setInterval(slydeProgress, slideTime);
//alert(testVar);

// ***** SET SIZE & INSERT HTML *****
$('.slydeshow, .slyde_stage').css({
                    width: imgWidth,
                    height: imgHeight
});
$('.slyde_stage').prepend('<div class="slyde_indicator"></div><div class="slyde_progress_track"><div class="slyde_progress"></div></div>');
$('.slydeshow').append('<ul class="slyde_pagination"></ul>');


$('.slyde_progress').animate({
            width: '0%' }, {
                        duration: slideTime - 300,
                        easing: 'linear'
});

$('.slyde_progress').animate({
            width: '100%' }, {
            duration:300});


// ***** GENERATE PAGINATION *****
for(i=1; i <= countItems;i++){
    $('.slyde_pagination').append('<li><a href="#" rel="'+i+'">'+i+'</a></li>');
    }
$('.slyde_pagination li:first-child a').addClass('current_slyde');


// ***** PROGRESS BAR *****
function slydeProgress(){
    $('.slyde_progress').animate({
            width: '0%' }, {
                        duration: slideTime - 300,
                        easing: 'linear'
                    });
    $('.slyde_progress').animate({
            width: '100%' }, {
                    duration:300});
}


// ***** PLAY FUNCTION *****
function playForward(){
    countStarter++; //incriment countstarter by 1
    if(countStarter >= countItems) { //if count is greater or equal to # of slides:
        $('.slyde_items').animate({  //animate to beginning
            left: 0 }, {
                        duration: animationTime,
                        easing: 'easeOutExpo'
                    });
           ...