JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mlb-wrapper">
<div id="details" class="base">
<div id="photo" class="base">
<ul id="photos" style="margin-left: -1860px; ">
<li><a href=""><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Caption 2" width="620" height="298"></a></li>
<li><a href=""><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Caption 2" width="620" height="298"></a></li>
<li><a href=""><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Caption 3" width="620" height="298"></a></li>
<li><a href=""><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Caption 4" width="620" height="298"></a></li>
<li><a href=""><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Caption 5" width="620" height="298"></a></li>
</ul>
</div><div id="hover-box">
<div id="navigation" class="base">
<ul>
<li><a href="" id="page1" class="switcher-num">1</a></li>
<li><a href="" id="page2" class="switcher-num">2</a></li>
<li><a href="" id="page3" class="switcher-num">3</a></li>
<li><a href="" id="page4" class="highlight">4</a></li>
<li><a href="" id="page5" class="switcher-num">5</a></li>
</ul>
<div id="prev-next-box">
<a href="" id="prev" class="prev-next">prev</a>
<a href="" id="pause" class="pause play-pause-show">pause</a>
<a href="" id="play" class="play play-pause-hide">play</a>
<a href="" alt="next" id="next" class="prev-next">next</a>
</div>
</div></div></div></div>

CSS

div{
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-family: inherit;
    text-align: left;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol,ul {
    list-style: none;
}

#mlb-wrapper {
    width: 620px;
    padding: 0 0 0 0;
}

    .base {
        margin: 0 auto;
        width: 620px;
        text-align: center;
        position: relative;
    }
    
    #photo {
        width: 620px;
        height: 298px;
        overflow: hidden;
    }

        #photo ul {
            list-style-type: none;
            margin-left: 0;
            width: 3100px;
        }
        
        #photo ul li {
            list-style-type: none;
            display: block;
            float: left;
        }

    #photo img {
        display: block;
    }

    #details {
        border: solid 0px #ccc;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding: 3px;
    }
    
    #hover-box {
        height: 23px;
        margin-top: -23px;
        position: relative;
        z-index: 9999;
        zoom: 1;
    }



    #navigation {
        background-color: #444;
        background: rgba(0, 0, 0, .5);
        height: 29px;
        width: 620px;
        z-index: 1;
        position: absolute;
        bottom: 0;
    }
    
    #navigation ul {
        width: 140px;
        float: left;
        margin-left: 4px;
        margin-bottom: 12px;
        display: inline;
    }
    
    #navigation ul li {
        width: 20px;
        float: left;
        padding: 4px 4px 0 0;
    }

    #navigation a:link, #navigation a:visited {
        font-size: 10px;
        text-decoration: none;
        color: #fff;
        outline: none;
    }

    #navigation a:hover, #navigation a:focus {
        color: #ff9933;
        background: none;
    }
    
    #navigation ul li a:hover, #navigation ul li a:focus {
        background: rgba(255, 255, 255, .5);
    }

   ...

JavaScript

$(document).ready(function() {

    // function to populate the data for the clicked item

    function fillContent(currentItem, objMLB) {
        $("#long-desc").html(objMLB.descText[currentItem - 1]);
        $("#title a").html(objMLB.headlineText[currentItem - 1]);
        $("#title a")[0].href = "#" + currentItem;
        $("#small-caption").html(objMLB.smallCaption[currentItem - 1]);
    }

    var sliderWidth = $("#photo").width();

    // bind a click event to the thumbnail photos and navigation links
    $("#navigation ul a").bind("click", function() {
        // get the clicked item from the URL
        var clickedHash = this.id.split("page")[1];
        // a previously existing highlight is removed to prevent duplicates
        $("#navigation ul a").removeClass("highlight");
        $("#navigation ul a").addClass("switcher-num");

        // loop through the navigation links to highlight the clicked one
        $("#navigation ul a").each(function() {
            var navHash = this.id.split("page")[1];
            if (clickedHash === navHash) {
                $(this).addClass("highlight");
                $(this).removeClass("switcher-num");
            }
        });

        // if any of items 2-6 are clicked, animate the margin accordingly
        if (clickedHash > 1) {
            var marginSetting = sliderWidth * clickedHash - sliderWidth;
            $("#photo ul").animate({
                marginLeft: "-" + marginSetting + "px"
            }, 500, function() {
                // optional callback after animation completes
            });

            // if item 1 is clicked, send the switcher back to the front (0 margin)
        } else {
            $("#photo ul").animate({
                marginLeft: "0px"
            }, 500, function() {
                // optional callback after animation completes
            });
        }

        //fillContent(clickedHash, objMLB);
        return false;
    });

    var t = setInterval(next, 5000);

   ...