title: jquery fade loop with setinterval
body: <p>I'm trying to make my own simple fade loop based on <a href="https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/" rel="nofollow">CSS-tricks Auto-Playing Slideshow</a>.  I need to allow for possibility of more than one in page.</p>
  
  <p>For some reason, my slides don't advance past the second one.  Perhaps because of placing it in a function?</p>
  
  <pre><code>$('.jCaroFade').each(createFader);
  function createFader (i, elem) {
      var track = $(elem);
      var firstSlide = track.find('.slide').eq(0);
  
      firstSlide.nextAll().hide();
      setInterval(function() { 
        firstSlide
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo(track);
      },  3000);
  
  }
  </code></pre>
  
  <p><strong>Fiddle: <a href="https://jsfiddle.net/L66v8oxv/" rel="nofollow">https://jsfiddle.net/L66v8oxv/</a></strong></p>
  
  <p>Thanks!</p>