JSFiddle - React, Tailwind, and code Playground

by Cone

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 {
    border:1px solid blue;
    position:relative;
    float:left;
    width:400px;
    height:250px;
}

#con ul ul {
    background:red;;
}

#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;
}
#slides li {
    height:100%;
    display:none;
    width:100%;
    float:left;
    background:#f4f4f4;
    left:0;
    position:absolute;
}
#slides li h3 {
    position:absolute;
    top:15px;
    z-index:5;
    display:none;
}
#slides li h3 p {
    padding:10px;
    font-size:10px;
    clear:both;
}
#slides li div {
    position:absolute;
    display:none;
    padding:10px;
    right:10px;
    bottom:0px;
    width:60%;
    font-size:11px;
}

#slides img {
    position:absolute;
    width:100%;
    height:100%;
    display:none;
}

JavaScript

$('#slides li').first().show().find('h3').fadeIn().animate({
                left: 10
            }).parent('li').find('div').show().animate({
                bottom: 15
            });


var unli = $('#slides');
$('#con').append('<span>45</span>');



$('#next').click(function () {
    var activeLi = $('li:visible', unli);
    var currentLi = $('li:visible', unli).next('li');

    if (activeLi.is(':animated')) {
        return false;
    }

    var appendLi = (currentLi.index() === -1) ? $('li:first', unli) : currentLi;

    if (appendLi.css('left', '100%').show()) {
        appendLi.animate({
            left: '0%'
        }, function () {
            $(this).find('h3').fadeIn().animate({
                left: 10
            }).parent('li').find('div').show().animate({
                bottom: 15
            });

        });
        activeLi.animate({
            left: '-100%'
        }, function () {
            $(this).hide().find('*').removeAttr('style');
        });
    }
});