jquery slideshow create a previous next loop on image
<p>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.</p>

<p>Here is my html</p>

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

<p>and here is my jquery</p>

<pre><code>$('.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');
  });
});
</code></pre>

<p>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></p>
