JSFiddle - React, Tailwind, and code Playground

by vandanasrivastava

HTML

<div id="slider">
<div class="wrap"> 
<div class="panel">Panel1</div> 
<div class="panel">Panel2</div> 
<div class="panel">Panel3</div> 
<div class="panel">Panel4</div> 
</div>
<div class="previous"></div>
<div class="next"></div>
</div>

<div class="progress_bar"></div>

<div class="dots">
</div>

CSS

#slider { 
    position:relative;
    width:100%;
    height:230px;
    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:20px;
    height:20px;
    background:#333;
}

#slider .next{
    position:absolute;
    right:0;
    top:100px;
    width:20px;
    height:20px;
    background:#333;
}


.progress_bar { 
 width:0px;
height:25px;
 position:relative;
    background:#fc3;    
}



.nav { margin:5px 0 }
.nav ul li {
    display:inline-block;
    padding:5px;
    background:#ccc;
    
}

JavaScript

var currentIndex = 0;// store current pane index displayed
var ePanes = $('#slider .panel'), // store panes collection
    time   = 5000,
    bar = $('.progress_bar');

function showPane(index){// generic showPane
    // 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

// 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);
    setTimeout(function() {
    showPane(currentIndex+1);
    }, time)
    
    var windowwidth = $(window).width();
    bar.animate({'width': "+=" + windowwidth}, time, run);
}

$('.dots').html(
  $('<ul/>', { id: 'selection' }).html(
  	$.map(Array(ePanes.length), function(o,i) {
      i++;	// because array indices run from 0
  		return $('<li/>').text(i);
		}) // map
  ) // <select/>
);
$(document).find('.dots li').click(function(ev){    showPane($(this).index());});

run();