JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div id="con">
    <ul id="slides">
        <li id="fir">
             <h3> 1 <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 id="sec">
             <h3> 2 <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 id="thi">
             <h3> 3 <p> Here I am</p></h3>

        </li>
        <li id="thi/four">
            <img src="http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2008/04/mercurycomparison.jpg">
             <h3> 4 <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 id="fou">
             <h3>5 <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;
}

body {
    
    font-family:Arial;
}

#con {
    position:relative;
    float:left;
    width:540px;
    height:250px;
}
#navs {
    list-style:none inside;
    position:absolute;
    display:block;
    bottom:24px;
    height:0;
    z-index:100;
    text-align:center;
    width:100%;
}
#navs li {
    display:inline-block;
    padding:12px;
    font-size:10px;
    margin-right:2px;
    background:#dfdfdf;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}

#navs li a {
    position:absolute;
    line-height:200px;
    width:0;height:0;
}

#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:#f4f4f4;
}
#slides li {
    height:100%;
    display:none;
    width:100%;
    float:left;
    left:0;
    position:absolute;
}
#slides li h3 {
    position:absolute;
    top:15px;
    color:#666;
    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;
}
.active {
    background:red!Important;
    color:white;
}

JavaScript

(function ($) {
    var settings = {
        prevB: $('#prev'),
        nextB: $('#next'),
        slider: $('#con'),
        un: $('#slides'),
        unli: $('#slides li'),
        active: 'active'
    };

    var methods = {
        init: function () {
            settings.unli.first().show().find('h3').fadeIn().animate({
                left: 10
            }).parent('li').find('div').show().animate({
                bottom: 15
            });
        },

        next: function (elem) {
            var activeLi = $('li:visible', settings.un);
            var offSet = '100%';
            var appendLi;
            var eID = elem.attr('id');
                
            // если слайдер еще аимирован то отменить клик 
            if (activeLi.is(':animated')) {
                return false;
            }
            
            //проверяем id тригера и определям какой какой слайд следующий
            if (eID === 'next') {
                appendLi = (activeLi.next('li').index() === -1) ? $('li:first', settings.un) : activeLi.next('li');
            } else if (eID === 'prev') {
                appendLi = (activeLi.prev('li').index() === -1) ? $('li:last', settings.un) : activeLi.prev('li');
                offSet = '-100%';
            } else if (eID === 'nav') {
                appendLi = $('li', settings.un).eq(elem.index());
                if (appendLi.is(':visible')) {
                    return false;
                }
            }
            // добавляем следующий слайд перед текущим, если все ок анимируем слайдер и 
            if (appendLi.css('left', offSet).show()) {
                methods.anim(activeLi, appendLi, eID);
                methods.navs(appendLi);
            }
        },

        navs: function (appendLi) {
            $('li#nav').each(function(){
                $(this).removeClass('active');
            })
            $('li#nav').eq(appendLi.index()).addClass('active');
        },

        anim: function (activeLi, appendLi, eID) {
  ...