Adding pause, next and previous buttons to jquery slider with progress bar
<p>I found <a href="http://jsfiddle.net/jp9c1xj3/2/" rel="nofollow">this simple slider</a> with a progress bar. It works fine but I would like to add next, previous and pause buttons to it. Can anyone help?</p>

<p><strong>JS</strong></p>

<pre><code>bar = $('.progress_bar');
time = 3000;

function run(){
    bar.width(0);
    bar.fadeIn(500,function(){
        bar.animate({'width': "100%"}, time).fadeOut(500,function(){
            change();run();
        });
    });
}
$("#slideshow &gt; li:gt(0)").hide();


var change = function() { 
  $('#slideshow &gt; li:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
};

run();
</code></pre>