JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div id="sliderContent_1" class="sliderContent">
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>    
    </div>
    <div class="sliderNav"></div>
</div>

<hr />

<div class="slider">
    <div id="sliderContent_2" class="sliderContent">
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>          
    </div>
    <div class="sliderNav"></div>
</div>

CSS

.slider
{
    float:left;
    width:100%;
    height:150px;
    background-color:#eee;
    margin-bottom:10px;
}

.sliderContent
{
    position:relative; /* ADDED */
    background-color:#eee;
    float:left;
    width:100%;
}

.sliderContent > div
{
    position:absolute; /* ADDED */
    width:100%; /* ADDED */
    background-color:#eee; /* ADDED */
}

.sliderNav
{
    position:relative;
    z-index:2;
    float:left;
    text-align:right;
    width:100%;
}

.sliderNav span
{
    height:15px;
    width:15px;
    background-color:#CCCCCC;
    margin:10px 0px 5px 5px;
    cursor:pointer;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display:inline-block;
}

.sliderNav span:hover, .sliderNav span.active{
    background-color:#FAAF16;
}

JavaScript

/* FadeMe 'FPS'
// jQuery plugin
// Author: Roko C. Buljan (2012)
// http://roxon.in/scripts/fademe_jquery_plugin/ */
(function($){
    $.fn.fademe = function(F,P,S){
        F=F||700;  // FADE TIME
        P=P||3000; // PAUSE TIME
        S=S-1||0;  // START FROM SLIDE
        var e=this.children(), T, p=this.parent(), eLen = e.length;       
        for(i=0;i<eLen;i++){ this.next().append('<span />'); } // generate NAV buttons
        var b = this.next().find('span');
        b.eq(S).addClass('active');
        function a(){
            e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0);
            b.removeClass('active').eq(S).addClass('active');
        }
        p.on('mouseenter mouseleave',function(e){
            var m=e.type==='mouseenter'?clearTimeout(T):aa();    
        });
        b.on('click',function(){
            S = $(this).index()-1;
            a();
        });
        e.eq(S).show().siblings(e).hide();
        function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();
    };
})(jQuery);



//===========================//


$('#sliderContent_1').fademe();

$('#sliderContent_2').fademe(400,2500);