JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div id="slider">
    <div id="overlayPagination">
        <ul>
            <li> <a href="#">
                    <img src="http://www.pca-one.com/parts/bannerButtonOff.png" />
                </a>

            </li>
            <li> <a href="#">
                    <img src="http://www.pca-one.com/parts/bannerButtonOff.png" />
                </a>

            </li>
            <li> <a href="#">
                    <img src="http://www.pca-one.com/parts/bannerButtonOff.png" />
                </a>

            </li>
        </ul>
    </div>
    <div id="overlayPrev"> <a href="#">
            <img src="http://cdn5.iconfinder.com/data/icons/super-mono-sticker/icons/arrow-left_sticker.png" />
        </a>

    </div>
    <div id="overlayNext"> <a href="#">
            <img src="http://cdn5.iconfinder.com/data/icons/super-mono-sticker/icons/arrow-right_sticker.png" />
        </a>

    </div>
    <div id="slides">
        <ul>
            <li> <a href="#1">
                <p class="slider_txt">Horses go neeiigghh</p>
                    <img class="slider_img" src="http://us.123rf.com/400wm/400/400/insima/insima1301/insima130100029/17352467-running-horse-cartoon-picture-isolated-on-white-background-side-view-vector-illustration.jpg" />
                </a>

            </li>
            <li> <a href="#2">
                <p class="slider_txt">Piranha's bite!</p>
                    <img class="slider_img" src="http://www.freestockphotos.biz/pictures/11/11373/piranha.png" />
                </a>

            </li>
            <li> <a href="#3">
                <p class="slider_txt">Cows got moooooo</p>
                    <img class="slider_img" src="http://www.cimawebdesign.com/wp-content/uploads/2013/03/How-to-Create-Animal-Cartoon-Characters-Course-Part3.jpg" />
                </a>

            </li>
        </ul>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#slider {
    width: 400px;
    height: 200px;
    border: 1px solid red;
    position:relative;
}
#slides img, #slides p {
    position: absolute;
    top:0;
    left:0;
    margin: 0px 0px;
    display: none;
}
#slides p {
    z-index:3;
}
#slides {
    width: 400px;
    height: 200px;
    position:absolute;
    overflow:hidden;
}
#overlayPagination {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 100px;
    height: 20px;
    background-color: #eaeaea;
}
#overlayPagination ul {
    display: inline;
    list-style-type: none;
}
#overlayPagination ul li {
    float:left;
    width: 30px;
}
#overlayPrev {
    z-index: 2;
    position:absolute;
    top: 70px;
    left: 0;
    display:none;
}
#overlayNext {
    z-index: 2;
    position:absolute;
    top:70px;
    right:0;
    display:none;
}

JavaScript

$(document).ready(function () {

    var activeSlide = -1;
    
    var autoSlide = -1;
    var intervalId;

    function changeSlider(sliderId) {
        if (activeSlide == sliderId) {
            return false;
        }
        activeSlide = sliderId;
        $("p.slider_txt:not(:eq(" + sliderId + "))").each(function () {
            $(this).stop(true, false);
            $(this).fadeOut(250);
        });
        $("img.slider_img:not(:eq(" + sliderId + "))").each(function () {
            $(this).stop(true, false);
            $(this).fadeOut(1000);
        });
        $("#overlayPagination img:not(:eq(" + sliderId + "))").each(function () {
            $(this).attr("src","http://www.pca-one.com/parts/bannerButtonOff.png");
        });
        
        $("#overlayPagination img:eq(" + sliderId + ")").attr("src","http://www.pca-one.com/parts/bannerButtonOn.png");
        $("img.slider_img:eq(" + sliderId + ")").fadeIn(1000);
        $("p.slider_txt:eq(" + sliderId + ")").css("margin-left", "0px").fadeIn(2000);
    };

    $("#overlayPagination a").click(function () {
        autoSlide = $("img.slider_img").length;
        changeSlider($('#overlayPagination a').index($(this)));
    });

    $("#overlayPrev a").click(function () {
        autoSlide = $("img.slider_img").length;
        if (activeSlide <= 0) {
            changeSlider($("img.slider_img").length - 1);
        } else {
            changeSlider(activeSlide - 1);
        }
    })

    $("#overlayNext a").click(function () {
        autoSlide = $("img.slider_img").length;
        if (activeSlide >= ($("img.slider_img").length - 1)) {
            changeSlider(0);
        } else {
            changeSlider(activeSlide + 1);
        }
    })

        // Let's avoid fadeOut and fadeIn due to stop() bug
    $("#slider").mouseenter(function () {
        clearInterval(intervalId);
        $("#overlayPrev, #overlayNext").stop(true, false).css({opacity: 0, display: 'block'}).animate(
            {opacity:1},
   ...