title: Building a jQuery Image Slider with animation
body: <p>So I'm somewhat new to jQuery, but I have a couple months experience. My question goes like this.</p>
  
  <p>I built an image slider that loops through a <code>div</code> and animates the photos "sliding in right to left" when I click the NEXT button. My problem, however, is changing it to "slide left to right" when I click the previous button. </p>
  
  <p>In my code I've tried moving my <em>animate margin-left.fadeOut</em> statement into the <em>if btn has class next</em> conditional, and replacing that with <code>.queue(function)</code>, <code>.css(function)</code>, <code>.animate(function)</code> and a few others, but nothing is seeming to work and I can't leave it on the top line because it effects the previous conditional which I want to work in the opposite that my next button is going.</p>
  
  <p>I have been very much stuck on this for weeks and I keep coming back to this point that works halfway. Can anybody steer me in the right direction. I'm stumped.  </p>
  
  <p>Here is what I have so far.</p>
  
  <pre><code>&lt;body&gt;
      &lt;section class="photos"&gt;
          &lt;div class="slider"&gt;
              &lt;div class="photo"&gt;
                  &lt;img src="images/photoOne.png"&gt;
              &lt;/div&gt;
              &lt;div class="photo hidden"&gt;
                  &lt;img src="images/photoTwo.png"&gt;
              &lt;/div&gt;
              &lt;div class="photo hidden"&gt;
                  &lt;img src="images/photoThree.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
  
  
      &lt;div class="buttons"&gt;
          &lt;a href="#" class="btn prev"&gt;Previous&lt;/a&gt;
          &lt;a href="#" class="btn next"&gt;Next&lt;/a&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;script src="jquery-1.9.1.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  var activePhoto = 0;
  
  $('.btn').click(function() {
  
  var $btn = $(this);
  
  $photoBox.eq(activePhoto).animate({ 
  "margin-left": "-=744px"}, "fast").fadeOut(function () {
  
      if ($btn.hasClass('next')) {
          if (activePhoto == $photoBox.length - 1) {
              activePhoto = 0;
          } else {
              activePhoto++;
          }
  
          $photoBox.eq(activePhoto - 1).css({
              "margin-left": "+=744px"
          });
  
          $photoBox.eq(activePhoto).css({
              "margin-left": "+=744px"
          });
  
          $photoBox.eq(activePhoto).fadeIn().animate({
              "margin-left": "-=744px"
          }, "fast");
  
      } else if ($btn.hasClass('prev')) {
  
          if (activePhoto == 0) {
              activePhoto = $photoBox.length - 1;
          } else {
              activePhoto--;
          }
      }
  
  });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>As I said, it works just fine like this when I click next, but getting it to do the opposite when I click previous is giving me problems. If this makes sense, this is what I was trying to do with my jQuery. </p>
  
  <pre><code>&lt;script&gt;
  var activePhoto = 0;
  
  $('.btn').click(function() {
  
  var $btn = $(this);
  
  $photoBox.eq(activePhoto).queue(function () {
      if ($btn.hasClass('next')) {
  
          if (activePhoto == $photoBox.length - 1) {
              activePhoto = 0;
          } else {
              activePhoto++;
          }
  
          $photoBox.eq(activePhoto - 1).animate({
             "margin-left": "-=744px"}, "fast").fadeOut();
  
          $photoBox.eq(activePhoto - 1).css({"margin-left": "+=744px"});
  
          $photoBox.eq(activePhoto).css({"margin-left": "+=744px"});
  
          $photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "-=744px"}, "fast");
  
      } else if ($btn.hasClass('prev')) {
  
          if (activePhoto == 0) {
              activePhoto = $photoBox.length - 1;
          } else {
              activePhoto--;
          }
  
          $photoBox.eq(activePhoto + 1).animate({"margin-left": "+=744px"}, "fast").fadeOut();
  
          $photoBox.eq(activePhoto + 1).css({"margin-left": "-=744px"});
  
          $photoBox.eq(activePhoto).css({"margin-left": "-=744px"});
  
          $photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "+=744px"}, "fast");
  
      }
  });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I hope that makes sense :)</p>
  
  <p>Here are two jsfiddles I have for my example. Perhaps this will illustrate my problem for you.
  The first one is how it currently works with the next button and the images sliding from right to left. The second is what I am attempting to do, a reverse of the animation for the previous button with the image sliding out to the right of the caption, the subsequent image fading in on the left of the caption and then sliding in above the caption. Neither the previous nor next buttons work properly in the second example. </p>
  
  <p><a href="http://jsfiddle.net/jay_dub/dtdZc/" rel="nofollow">http://jsfiddle.net/jay_dub/dtdZc/</a> </p>
  
  <p><a href="http://jsfiddle.net/jay_dub/naKub/" rel="nofollow">http://jsfiddle.net/jay_dub/naKub/</a></p>