Question

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 http://satbulsara.com/luke-irwin/rugs/floral/testing-slide/

Answer 1

There’s quite a few ways to do this IMO, but this one should be pretty close to your existing code:

$('.slideWrap:not(:first)').hide();
var $boxes = $(".slideWrap"),
    $currentBox = $boxes.first().show();

$("#next").click(function() {
    $currentBox.fadeOut(300, function() {
        $currentBox = $currentBox.next();
        if (!$currentBox.length) {
            $currentBox = $boxes.first();
        }
        $currentBox.fadeIn(300);
    });
});
$("#prev").click(function() {
    $currentBox.fadeOut(300, function() {
        $currentBox = $currentBox.prev();
        if (!$currentBox.length) {
            $currentBox = $boxes.last();
        }
        $currentBox.fadeIn(300);
    });
});