Jquery Slider - first slide scrolls too fast-CodePudding

Im having a image slider with proggess bar. https://jsfiddle.net/vandanasrivastava/voe49n8r/1/ The slider is auto rotating. But the problem is, first slide scrolls too fast. Im new to javascript. Any help is much appreciated. Please check below JS fiddle.

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
$('.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();

CodePudding user response：

on line 24 you're firing showPane(0), but then you run showPane(currentIndex 1) on the run function just after those.

Also, set on the first line currentIndex = -1 instead of 0.

So essentially you're running it twice. Just comment out showPane(0) and it should work.