title: jQuery timed repeating Slideshow
body: <p>The code below swaps the first pic to the second pic correctly but doesnt continue to 3 and 4 and start over.</p>
  
  <pre><code>= function () {
  
      var $active = $('#challengeTwoImageJq .carouselImagejQueryActive');
      var $next = ($('#challengeTwoImageJq .carouselImagejQueryActive').next().length &gt; 0) ? $('#challengeTwoImageJq .carouselImagejQueryActive').next() : $('#challengeTwoImageJq img:first');
      timer = setInterval(function () {
  
          $active.removeClass('carouselImagejQueryActive');
          $next.fadeIn().addClass('carouselImagejQueryActive');
  
      }, 3000);
  
  
      timer = setInterval('challengeTwoJquery()', 3000);
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id='challengeTwoImageJq' class='sectionChallengeCarouselImage'&gt;
      &lt;img id='imgq1' imgn='1' class='carouselImage carouselImagejQueryActive' src='img/image1.jpg'/&gt;
      &lt;img id='imgq2' imgn='2' class='carouselImage' src='img/image2.jpg'/&gt;
      &lt;img id='imgq3' imgn='3' class='carouselImage' src='img/image3.jpg'/&gt;
      &lt;img id='imgq4' imgn='4' class='carouselImage' src='img/image4.jpg'/&gt;
  &lt;/div&gt;
  </code></pre>