How to add next & previous option to a slider?

Question

I used this tutorial to create a simple jquery slider:

HTML (Wrapper with div's as the "slides", which can contain any content):

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

CSS (Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz):

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

JQUERY(Run after DOM is ready):

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

And question is: how add next & previous option to this slider?

Answer 1

Here i created a working code jsfiddle link next-prev button slider.

// Add two links to HTML HTML:

   <a id="prev" href="#" >Prev</a>  
   <a id="next" href="#" >Next</a>    

JAVASCRIPT:

$("#next").click(function(){
    $('#slideshow > div:first-child')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
});

$("#prev").click(function(){
    $('#slideshow > div:first-child')
    .fadeOut(1000)
     $('#slideshow > div:last-child')
    .prependTo('#slideshow') 
    .fadeOut();
    $('#slideshow > div:first-child').fadeIn();
});