JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script type='text/javascript'>
    $(window).load(function() {
        var currentIndex = 0; // store current pane index displayed
        var ePanes = $('#slider .panel'), // store panes collection
            time = 3000,
            bar = $('.progress_bar');

        function showPane(index) { // generic showPane
            // reset bar
            bar.stop(true, true).css("width", 0).animate({
                'width': "+=400"
            }, time, run);
            // hide current pane
            ePanes.eq(currentIndex).stop(true, true).fadeOut();
            // set current index : check in panes collection length
            currentIndex = index;
            if (currentIndex < 0) currentIndex = ePanes.length - 1;
            else if (currentIndex >= ePanes.length) currentIndex = 0;
            // display pane
            ePanes.eq(currentIndex).stop(true, true).fadeIn();
            // menu selection
            $('.nav li').removeClass('current').eq(currentIndex).addClass('current');
        }
        // bind ul links
        $('.nav li').click(function(ev) {
            showPane($(this).index());
        });
        // bind previous & next links
        $('.previous').click(function() {
            showPane(currentIndex - 1);
        });
        $('.next').click(function() {
            showPane(currentIndex + 1);
        });
        // apply start pane
        showPane(0);

        function run() {
            bar.width(0);
            showPane(currentIndex + 1);
            bar.animate({
                'width': "+=400"
            }, time, run);
        }

        run();

    });
</script>
</head>
<body>
    <div id="slider">
        <div class="wrap">
            <div class="panel" style="background-color:red;">Panel1</div>
            <div class="panel" style="background-color:green;">Panel2</div>
            <div class="panel" style="background-color:blue;">Panel3</div>
        </div>
        <div class="previous">
            <p>
               ...

CSS

#slider {
    position:relative;
    width:400px;
    height:200px;
    background:#CCCCCC;
}
#slider .panel {
    position:absolute;
    width:400px;
    height:200px;
    display:none;
}
#slider .panel:first-child {
    display:block;
}
#slider .previous {
    position:absolute;
    left:0;
    top:100px;
    width:40px;
    height:40px;
    background:#333;
    text-align: center;
    color:white;
    cursor:pointer;
}
#slider .next {
    position:absolute;
    right:0;
    top:100px;
    width:40px;
    height:40px;
    background:#333;
    text-align: center;
    color:white;
    cursor:pointer;
}
.progress_bar {
    width:0px;
    height:25px;
    position:relative;
    background:gray;
}
.nav {
    margin:5px 0
}
.nav ul li {
    display:inline-block;
    padding:5px;
    background:#ccc;
    cursor:pointer;
    opacity: .5;
}
.nav ul li:hover {
    opacity: 1;
}
.nav ul li.current {
    opacity: 1;
}