title: jquery image slider with .next() and .prev() not working
body: <p>Iam trying to code an simple image slider with next and prev buttons.
  But I have problems iterating through the list, especially when its the first image and I click the prev button.
  The slider should then show the last image.
  Maybe someone can give me a hint...</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="slideshow"&gt; 
  &lt;img src="img/slide11.jpeg"  alt="" class="active"&gt;
  &lt;img src="img/slide31.png" alt=""&gt;
  &lt;img src="img/slide21.png"  alt=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Click Handler:</p>
  
  <pre><code>$(document).ready(function () {
   $('#next').bind('click', function() {
      slideSwitchP('next');
  });
  
   $('#prev').bind('click', function() {
      slideSwitchP('prev');
  });
  });
  }
  </code></pre>
  
  <p>And the jQuery Code so far (not working)</p>
  
  <pre><code>function slideSwitchP($control) {
  var $active = $('#slideshow IMG.active');
  
  var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
  var $prev = $next.prev().length ? $active.prev() : $('#slideshow IMG:last');
  
  console.log('next', $next);
  console.log('prev', $prev);
  
  $active.addClass('last-active');
  
  if($control === 'next'){ 
  console.log($control);
  $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
      });
  }
  if($control === 'prev'){ 
  console.log($control);
  //prev not working!
  }
  }
  </code></pre>
  
  <p>Any ideas will be appreciated!
  Thanks!</p>