title: add next and previous button in jquery slider
body: <p>I Made some below script to make simple fadeInOut slideshow. Now I want to add Next/Prv buttton. How can i do it?</p>
  
  <p>Here is my HTML below:  </p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="slider-main-part"&gt;
          &lt;img class="slider-img" src="images/slider01.jpg"  /&gt;
          &lt;img class="slider-img" src="images/slider02.jpg"  /&gt;
          &lt;img class="slider-img" src="images/slider03.jpg"  /&gt;
          &lt;img class="slider-img" src="images/slider04.jpg"  /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my JavaScript/jQuery below:</p>
  
  <pre><code>$(document).ready(function (e) {
  var slider = {
      init: function () {
          var initialFadeIn = 1000;
          var itemInterval = 5000;
          var fadeOut = 2500;
          var numberOfItems = $('.slider-img').length;
          var currentItem = 0;
          //show first item
          $('.slider-img').eq(currentItem).fadeIn(initialFadeIn);
          //loop through the items
          var infiniteLoop = setInterval(function () {
              $('.slider-img').eq(currentItem).fadeOut(fadeOut);
              if (currentItem == numberOfItems - 1) {
                  currentItem = 0;
              } else {
                  currentItem++;
              }
              $('.slider-img').eq(currentItem).fadeIn(fadeOut);
          }, itemInterval);
      }
  };
  slider.init();
  </code></pre>
  
  <p>});</p>
  
  <p>Here i attach my CSS below:</p>
  
  <pre><code>#slider-main-part {
      position: relative;
      zoom:1;
      margin:auto;
      width:980px;
  }
  .slider-img {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width:980px;
      border:none;
      height:551px;
  }
  </code></pre>