Add navigation to a slider
<p>Im using this script to slide images using background-image into div. It works well but I'd like to add navigation buttons for a better user experience (next and prev).</p>

<pre><code>    &lt;script type="text/javascript"&gt;
    $(document).ready(function(){

     var imgArr = new Array( // relative paths of images
     '/images/1.jpg',
     '/images/2.jpg',
     '/images/3.jpg'
     );

      var preloadArr = new Array();
      var i;

      /* preload images */
      for(i=0; i &lt; imgArr.length; i++){
      preloadArr[i] = new Image();
      preloadArr[i].src = imgArr[i];
       }

     var currImg = 1;
     var intID = setInterval(changeImg, 5000);

     /* image rotator */
     function changeImg(){
     $('#masthead').animate({opacity: 0}, 500, function(){
     $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
     }).animate({opacity: 1}, 500);
     }

    });
    &lt;/script&gt;
</code></pre>

<p>Thanks in advance!</p>
