如何將下一個和上一個選項添加到滑塊？

Question

我用這個tutorial創建一個簡單的jQuery滑塊：

HTML（包裝用div的的「幻燈片」，它可以包含任何內容）：

<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（幻燈片需要被絕對定位。在包裝中的這有額外瀟灑的一點點）：

#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（DOM後運行就緒）：

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

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

問題是：如何在此滑塊上添加下一個&上一個選項？

Answer 1

在這裏，我創建了一個工作代碼jsfiddle鏈接next-prev button slider。

//添加兩個鏈接至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(); 
});