JSFiddle - React, Tailwind, and code Playground

HTML

<div id="con">
    <ul id="slides">
        <li>
             <h3> FOUR <p> Here I am</p></h3>

            <div>Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum</div>
        </li>
        <li>2
             <h3> FOUR <p> Here I am</p></h3>

            <div>Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum</div>
        </li>
        <li>3</li>
        <li>
            <img src="http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2008/04/mercurycomparison.jpg">
             <h3> FOUR <p> Here I am</p></h3>

            <div>Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum</div>
        </li>
        <li>
             <h3> FOUR <p> Here I am</p></h3>

            <div>Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum Lorem Ipsim Parabeluum</div>
        </li>
    </ul> <a href="#" id="prev"> << </a>
 <a href="#" id="next"> >> </a>

</div>

CSS

* {
    margin:0;
    padding:0;
}
#con {
    position:relative;
    float:left;
    width:540px;
    height:250px;
}

#navs {
  list-style:none inside;
  position:absolute;
  z-index:100;
}

#navs li {
  float:left;
  padding:5px 8px;
  font-size:10px;
  margin-right:2px;
  background:#dfdfdf;
  cursor:pointer;
}

#prev, #next {
    cursor:pointer;
    font-size:10px;
    position:absolute;
    top:50%;
    margin-top:-7px;
    padding: 5px;
    background:#dfdfdf;
}
a#prev, a#next {
    text-decoration:none;
}
#next {
    right:0;
}
#slides {
    list-style:inside none;
    height:100%;
    width:100%;
    position:relative;
    overflow:hidden;
    background:#000;
}
#slides li {
    height:100%;
    display:none;
    width:100%;
    float:left;
    left:0;
    position:absolute;
}
#slides li h3 {
    position:absolute;
    top:15px;
    color:white;
    z-index:5;
    display:none;
}
#slides li h3 p {
    padding:10px;
    font-size:10px;
    clear:both;
}
#slides li div {
    position:absolute;
    display:none;
    background:#dfdfdf;
    padding:10px;
    right:10px;
    bottom:0px;
    width:60%;
    font-size:11px;
}
#slides img {
    position:absolute;
    width:100%;
    height:100%;
    display:none;
}

JavaScript

var unli = $('#slides');

var meth = function () {
    this.init = function (ths) {
        ths.first().show().find('h3').fadeIn().animate({
            left: 10
        }).parent('li').find('div').show().animate({
            bottom: 15
        });
    };

    this.next = function (elem) {
        var activeLi = $('li:visible', unli);
        if (activeLi.is(':animated')) {
            return false;
        }        
        
        if (elem.attr('id') === "next") {
  
            var currentLi = activeLi.next('li');
            var nonLi = $('li:first', unli);
            var dif = '100%';
          
        } else if (elem.attr('id') === "nav"){       
           
          currentLi = $('li',unli).eq(elem.index());
            
          if($('li',unli).eq(elem.index()).is(':visible')){
          return false;
          }
        } else {
            currentLi = activeLi.prev('li');
            nonLi = $('li:last', unli);
            dif = '-100%';
        }

        var appendLi = (currentLi.index() === -1) ? nonLi : currentLi;

        if (appendLi.css('left', dif).show()) {
            this.anim(appendLi, activeLi, elem.attr('id'));
        }
    };


    this.anim = function (app, act, id) {
        var actA = (id === "next") ? '-100%' : '100%';
        app.animate({
            left: '0%'
        }, function () {
            $(this).find('h3').fadeIn().animate({
                left: 20
            }).parent('li').find('div').show().animate({
                bottom: 15
            }).parent('li').find('img').fadeIn();
        });
        act.animate({
            left: actA
        }, function () {
            $(this).hide().find('*').removeAttr('style');
        });

    };
  
  this.navs = function(){
  
    $('#con').prepend('<ul id="navs"></ul>');
    for(var i = 0 ; i < $('li',unli).length ; i++ ){
     $("#navs").append("<li id='nav'>" + i + "</li>");
    }
    
  };
  
  this.navsact = function(ind){
    alert(ind);
  };

};

var clic = new...