如何向jquery图像滑块添加下一个和上一个箭头？

我已经创建了一个jquery滑块，它在autoplay上运行得非常好，但是在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中做了什么？请帮助

为什么要将事件处理程序包装到函数中？请同时提供css代码这可能不是您想要的，也不是一个答案。但是您应该考虑使用jQuery插件或另一个JavaScript库来进行幻灯片播放。您现在拥有的所有内容都是一些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);
        });
        });