JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="slider fnSlider">
            <ul>
                <li>
                    <img src="http://placehold.it/500x250&text=image1" width="500" height="250" alt="Vehicle">
                </li>
                <li>
                    <img src="http://placehold.it/500x250&text=image2" width="500" height="250" alt="Vehicle">
                </li>
                <li>
                    <img src="http://placehold.it/500x250&text=image3" width="500" height="250" alt="Vehicle">
                </li>
                <li>
                    <img src="http://placehold.it/500x250&text=image4" width="500" height="250" alt="Vehicle">
                </li>
            </ul>
            <div class="navigator">
                <a href="#" class="prev">Prev</a>
                <a href="#" class="next">Next</a>
            </div>
        </div>
    </div>

CSS

*{
            margin: 0;
            padding: 0;
        }

        ul li{
            list-style: none;
        }

        .wrapper{
            width:500px;
            margin: 0 auto;
            padding: 40px 0;
        }

        .slider{
            width: 500px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;   
        }

        .slider ul{
            min-height: 250px;
            position: relative;
        }
        .slider ul li{
            float: left; 
        }

JavaScript

var Slider = window.Slider = window.Slider || {};

        Slider = (function($){

            var $reelWrap = $('.fnSlider'),
                $reel = $('.fnSlider').children('ul'),
                $slide = $reel.children('li'),
                slideWidth = $slide.width(),
                numSlides = $slide.length,                
                reelWidth = numSlides*slideWidth,
                $prev = $('.prev'),
                $next = $('.next'),

                init = function(){   
                    pageLoad();               
                    nextSlide();
                    prevSlide();
                },

                pageLoad = function(){
                    var index = 2;                                  
                    $reel.css('width', reelWidth);
                    $slide.eq(index).addClass('fnActive');     
                    $reel.css('left', -(index*slideWidth));
                }

                nextSlide = function(){ 

                    $next.click(function(e){
                        e.preventDefault();
                         
                        var index = $reel.children('.fnActive').index() + 1;
                        var scroll = index * slideWidth;

                        if(index < numSlides){
                            $reel.animate({left: -(scroll)}).children().removeClass('fnActive');
                            $slide.eq(index).addClass('fnActive');
                        }else{
                           $reel.animate({left: 0}).children().removeClass('fnActive'); 
                           $slide.eq(0).addClass('fnActive');
                        }

                    });
                    
                },

                prevSlide = function(){ 

                    $prev.click(function(e){
                        e.preventDefault();

                        var index = $reel.children('.fnActive').index() - 1;
                        var scroll = index * slideWidth;
                       ...