向滑块添加控件

Question

我需要帮助向滑块添加控件。我想添加一个next和prev按钮。如果有可能我想尝试这样做，如果你点击图片它会带来一个放大版本。谢谢。

$(function() {

    
    var width = 650;
    var animationSpeed = 3000;
    var pause = 5000;
    var currentSlide = 1;

    
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

    function startSlider() {
        interval = setInterval(function() {
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                if (++currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }
    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();
});

  #slider {
    display: none;
    padding-top: 50px;
    margin-left: auto;
    margin-top: auto;
    margin-right: auto;
      width: 650px;
      height: 500px;
      overflow: hidden;
  }

  #slider .slides {
      display: block;
      width: 6000px;
      height: 500px;
      margin: 0;
      padding: 0;
  }

  #slider .slide {
      float: left;
      list-style-type: none;
      width: 650px;
      height: 500px;
  }

<div class="container center">
<div class="header">
</div>
  <div id="slider">
      <ul class="slides center">
          <li class="slide"><img src="images/1.jpeg"/></li>
          <li class="slide"><img src="images/2.jpg"/></li>
          <li class="slide"><img src="images/3.jpg"/></li>
          <li class="slide"><img src="images/4.jpg"/></li>
          <li class="slide"><img src="images/5.jpg"/></li>
          <li class="slide"><img src="images/6.jpg"/></li>
          <li class="slide"><img src="images/7.jpg"/></li>
          <li class="slide"><img src="images/8.jpg"/></li>
          <li class="slide"><img src="images/9.jpg"/></li>
          <li class="slide"><img src="images/10.jpg"/></li>
       </ul>
      
           <script type="text/javascript">
                $(document).ready(function () {
                  $('#slider').fadeIn(3000);
});
            </script>
   </div>