Manual Controls(Prev and Next) on Javascript Image carousel

I have the following code that creates a slideshow with Javascript.

The HTML

<div id="buttons">
    <a href="#" id="prev">prev</a>
    <a href="#" id="next">next</a>
    <div class="clear"></div>
  </div>
<ul class="slider">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>

The Javascript

<script>

$(document).ready(function() {
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }


  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

This code automatically slides through the images.

I am am trying to add a previous and next button functionality to it, so that users can manually flip through the images. I would like to be an infinite carousel.

How do I do this with fade, as I have it now?

$('#next').click(function() {

}

EDIT

I tried this:

<script>

$(document).ready(function() {
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }

    $('.slider img:gt(0)').hide();

    $('#next').click(function() {
        $('.slider img:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
    });

    $('#prev').click(function() {
        $('.slider img:first-child').fadeOut();
        $('.slider img:last-child').prependTo('.slider').fadeOut();
        $('.slider img:first-child').fadeIn();
    });

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

Now the manual buttons work, but the automatic scrolling of the slides on interval doesn't work anymore, the slides only change when the buttons are clicked. How do I also keep my automatic slideshow functionality as it worked before?