jQuery - Fader with Multiple Instances
<p>I'm building a jQuery driven fader, and I would like to have multiple instances on a page.  </p>

<blockquote>
  <p><strong>Goal</strong>: I'm trying to build this from scratch without the assistance of a plugin.  </p>
  
  <blockquote>
    <p><strong>What I've Tried</strong>:<br>
    1. Used this keyword/selector to create the variables needed, but am not getting what I need.<br>
    2. I had also setup a function with arguements, to find out the hard way jQuery won't seem to pass variables in this manner. Most lessons are best learned the hard way anyways.</p>
  </blockquote>
  
  <p><strong>Problem</strong>: I've been thru a handful of iterations locally with different results. I'm currently getting a too much recursion error, although it does work locally in some form.  </p>
  
  <p><strong>Thoughts</strong>: My next step would have been object notation, but was fearful of spinning my wheels with another wrong solution.</p>
  
  <p>Thanks everyone  </p>
</blockquote>

<p>JSFiddle: <a href="http://jsfiddle.net/UQmc3/" rel="nofollow">http://jsfiddle.net/UQmc3/</a>  </p>

<p>Code Samples to Follow<br>
<strong>HTML</strong>:  </p>

<pre><code>&lt;div&gt;
    &lt;div class="w-fader"&gt;
        &lt;ul class="w-slides"&gt;
            &lt;li class="current"&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /&gt;&lt;/li&gt;
            &lt;li class="next"&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /&gt;&lt;/li&gt;      
        &lt;/ul&gt;
    &lt;/div&gt;

    &lt;div class="w-fader"&gt;
        &lt;ul class="w-slides"&gt;
            &lt;li class="current"&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /&gt;&lt;/li&gt;
            &lt;li class="next"&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /&gt;&lt;/li&gt;              
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p><strong>jQuery/js</strong>:  </p>

<pre><code>var speed = 2000;
var name = 'fader';
var num = 1;

function setupUnique(){
$('.w-slides').each(function(){
    var panelId = $(this).attr('id');
    //alert(panelId);
    var nextItem = $(this).find('li.next');
    //alert(nextItem);
    var currentItem = $(this).find('li.current');
    var wrapHelperItem = $(this).find('.w-slides li.current+li');   
    var firstSwapItem = $(this).find('li:first');   
    var lastSwapItem = $(this).find('li:last'); 

    fadePanels();
    function fadePanels(){
    $('#'+panelId).each(function(){
        switcher();
        function switcher(){
        $(nextItem).animate({opacity:1}, speed, 'linear', function()
            {
                $(nextItem).removeClass('current');
                $(this).addClass('current');
                $(nextItem).addClass('next');
                $(this).removeClass('next');
                $(nextItem).css('opacity',0);
            });
        checker();
        }       

        //checker();

        function checker(){
        if($(lastSwapItem).hasClass('current'))
        {
            $(firstSwapItem).addClass('next');
            $(firstSwapItem).addClass('next').css('opacity',0);
        }
        else if($(firstSwapItem).hasClass('next') &amp;&amp; $(lastSwapItem).hasClass('current'))
        {
            $(firstSwapItem).addClass('current');       
            $(wrapHelperItem).addClass('next');
            $(firstSwapItem).removeClass('next');
        }
    }

    setupUnique();
    });
    }
});
}

function makeUnique(){
$('.w-slides').each(function(){
    $(this).attr('id',name+num);
    num++;
    setupUnique();
    });
}

makeUnique();
</code></pre>
