JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.1/jquery.scrollTo.js"></script>
<script src="https://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<div id="slideshow">
    <!-- List of slider images -->
    <ul>
        <li id="slide1"><img src="http://www.script-tutorials.com/demos/463/images/slide1.jpg" alt="Slide 1" /></li>
        <li id="slide2"><img src="http://www.script-tutorials.com/demos/463/images/slide2.jpg" alt="Slide 2" /></li>
        <li id="slide3"><img src="http://www.script-tutorials.com/demos/463/images/slide3.jpg" alt="Slide 3" /></li>
        <li id="slide4"><img src="http://www.script-tutorials.com/demos/463/images/slide4.jpg" alt="Slide 4" /></li>
        <li id="slide5"><img src="http://www.script-tutorials.com/demos/463/images/slide5.jpg" alt="Slide 5" /></li>
    </ul>
</div>
<div id="slideshow-nav">
    <!-- Navigation list of slider images -->
    <ul>
        <li><a href="#slide1">Slide 1</a></li>
        <li><a href="#slide2">Slide 2</a></li>
        <li><a href="#slide3">Slide 3</a></li>
        <li><a href="#slide4">Slide 4</a></li>
        <li><a href="#slide5">Slide 5</a></li>
    </ul>
</div>

CSS

* {margin: 0; padding: 0;}

#slideshow {/*slider container css*/
    width: 800px;
    height: 400px;
    overflow: hidden;
    margin: 50px auto 50px auto;
    box-shadow: 0px 0px 50px #333;
    -moz-box-shadow: 0px 0px 50px #333;
    -webkit-box-shadow: 0px 0px 50px #333;
}

#slideshow ul {/*manage slider scroll elements css*/
    width: 4000px;
    list-style: none; 
}

#slideshow ul li {
    float: left;
}

#slideshow-nav {/* Slider navigation container css */
    width: 150px;
    margin: 0 auto 100px auto;
}
#slideshow-nav ul {
    list-style: none; 
}
#slideshow-nav ul li {
    float: left; 
}
#slideshow-nav ul li a {/* navigation styling css */
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 5px;
    background: #fff;
    text-indent: -9999px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0px 0px 30px #000;
    -webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
    /* hover and active navigation css */
    background: #333;
}

JavaScript

$(document).ready(function() {
    var slider = $("#slideshow");
    var slider_nav = $("#slideshow-nav");
    slider_nav.find("a[href=#slide1]").addClass("active");
    
    slider_nav.localScroll({
        target:'#slideshow',
        axis: 'x'
    });
    
    slider_nav.find("a").click(function(){
        slider_nav.find("a").removeClass("active");
        $(this).addClass("active");
    });
});