JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<div id="slider-wrapper">
    <div id="slider">
        <div class="sp">
            <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-24.png"  />
        </div>
        <div class="sp">
            <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-22.png"  />
        </div>
        <div class="sp">
            <img src="http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-16.png"  />
        </div>
    </div>
    <div id="button-previous">prev</div>
    <div id="button-next">next</div>
    <div id="imagenum">
        <div/></div>

CSS

#slider-wrapper {
    margin: 5% 10%;
    max-height: 500px;
    max-width: 300px;
    position:relative;
}
#slider {
    display: block;
    position: relative;
    z-index: 99999;
    max-width: 710px;
    width: 100%;
    margin: 0 auto;
    background: red;
}
#button-previous {
    height: 60px;
    left: -40px;
    margin-top: 40%;
    position: absolute;
    width: 40px;
}
#button-next {
    float: right;
    margin-top: 40%;
    position: relative;
}
.sp {
    position: absolute;
}
#slider .sp {
    max-width: 710px;
    width: 100%;
    max-height: 500px;
    height: 40px;
}

JavaScript

var sliderDivs = $('#slider > div.sp');
    var sliderCount = sliderDivs.length;
    var currSlide = 0;
    $(":eq(0)", sliderDivs).fadeIn(1000);
    $("#button-next").click(function () {
        $("#slider > div.sp:eq(" + currSlide + ")").fadeOut(1000);
        currSlide++;
        if (currSlide > sliderCount - 1) currSlide = 0;
        $("#slider > div.sp:eq(" + currSlide + ")").fadeIn(1000);
        $('#imagenum').text(currSlide);
    });
    $("#button-previous").click(function () {
        $("#slider > div.sp:eq(" + currSlide + ")").fadeOut(1000);
        currSlide--;
        if (currSlide < 0) currSlide = sliderCount - 1;
        $("#slider > div.sp:eq(" + currSlide + ")").fadeIn(1000);
        $('#imagenum').text(currSlide);
    });