JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div id="con">
    <ul id="slides">
        <li id="fir">77777777777777777777
             <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">888888888888888888
             <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">9999999999999999999999
             <h3> 3 <p> Here I am</p></h3>

        </li>
        <li id="thi/four">1000000000000000000000
            <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">1111111111111111111111111
             <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:300px;
    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:red;
    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;
    background:red;
    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 ($) {
    $.fn.slideB = function (options) {
        var defaults = {
            spa: $('#slides'),
            swin: $('#slider li'),
            swinl: $('#slider li:last'),
            swinf: $('#slider li:first'),
            timer : null,
            interval : 1600,
            index : 0
        };
        
        var settings = $.extend({}, defaults, options);
        $('li:eq('+settings.index+')',settings.spa).show();
        if(settings.spa.prepend('<ul id="navs"></ul>')){
        alert($('li',settings.spa).length);
            for(var f = 0 ; f < $('li',settings.spa).length ; f++ ){
            console.log(f);
            }
        };

        var methods = {
            slide: function (elem) {
                var nextSlide;
                nextSlide = (elem.index() + 1 === $('li', defaults.spa).length) ? $('li:first',defaults.spa) : elem.next('li');
                nextSlide.css('left', '100%').show(function () {
                    elem.animate({ left: '-100%' }).hide().removeAttr('style');
                    $(this).animate({ left: '0%' });
                });
            }

        };


        /* setInterval(function () {
            var nowac = $('li:visible', settings.spa);
            if (nowac.is(':hover')) {} else {
                methods.slide(nowac);
            }
        }, 3000); */

    };
})(jQuery);

$('#con').slideB();