jquery slideshow create a previous next loop on image

[admin]

I am trying to create a simple image slideshow that fades in and out the previous and next images that are wrapped in p tags because of how wordpress does it, I have managed to get it to move to the next image but I cannot get it to move to the previous image. I would also like it to stay in a continuous never ending loop when clicking previous or next.

Here is my html

<div>
  <div id="prev">Previous Image</div>
  <div id="next">Next Image</div>
  <div id="slides">
    <p class="slideWrap">
      <img src=""  alt="" title="Untitled-2" class="alignnone size-full wp-image-460" height="500" width="500" />
    </p>
    <p class="slideWrap">
      <img src=""  alt="" title="fishy" class="alignnone size-full wp-image-369" height="496" width="437" />
    </p>
  </div>
</div>

and here is my jquery

$('.slideWrap:not(:first)').hide();
$currentBox = $(".slideWrap");

$("#next").click(function() {
  $currentBox.fadeOut(function() {
    $currentBox = $currentBox.next();
    $currentBox.fadeIn('300');
  });
});
$("#prev").click(function() {
  $currentBox.fadeOut(function() {
    $currentBox = $currentBox.prev();
    $currentBox.fadeIn('300');
  });
});

heres the url <a href="http://satbulsara.com/luke-irwin/rugs/floral/testing-slide/" rel="nofollow">http://satbulsara.com/luke-irwin/rugs/floral/testing-slide/</a>