如何将下一个和后一个箭头添加到jquery图像滑块？

Question

我已经创建了一个jquery滑块，它在自动播放方面效果很好，但我在下一个和上一个按钮的jquery中遇到了困难。

HTML

<div id="slider">
<div>
<img src="slideshow/Chrysanthemum.jpg"  width="500" height="300"></img>
 </div>
<div>
<img src="slideshow/Tulips.jpg" title="Tulips" width="500" height="300"></img>
 </div>
 </div>
<div class="left-arrow">
<img src="images/left.png"></img>
</div>
  <div class="right-arrow">
  <img src="images/right.png"></img>
</div>

和jquery是

$(function() {

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

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

        next(function(){
        $('.right-arrow').click(function(){
        $("#slider > div:first")
        .fadeIn(500)
       .next()
       .fadeOut(500)
       .end()
       .appendTo("#slider");            
         }, 500);
        });

        previous(function(){
        $('.left-arrow').click(function(){
        $("#slider > div:last")
        .fadeOut(500)
       .prev()
       .fadeIn(500)
       .end()
       .appendTo("#slider");            
         }, 500);
        });
        });

幻灯片在自动播放中有效但下一个和上一个箭头不起作用。我在jquery做什么错了？请帮忙