title: Implementing a Parameter to a plugin - Shows 'X' number of elements
body: <p>The current plugin, shown below, scrolls the top-most div in a series of divs with the same class upwards, then removes it from the container, and appends it to the bottom of the series (within the container). This gives the illusion of a vertical slideshow. </p>
  
  <pre><code>$.fn.rotateEach = function ( opts ) {
      var $this = this,
          defaults = {
              delay: 5000
          },
          settings = $.extend(defaults, opts),
          rotator = function ($elems) {
              $elems.eq(0).slideUp(500, function(){
                  var $eq0 = $elems.eq(0).detach();
                  $elems.parent().append($eq0);
                  $eq0.fadeIn();
  
                  setTimeout(function(){ rotator( $($elems.selector) ); },
                             settings.delay);
              });
          };
  
      setTimeout(function(){ rotator( $this ); }, settings.delay);
  };
  
  $('.dynPanelContent').rotateEach();
  </code></pre>
  
  <p>However, if there are a large number of elements to scroll through, this would make for a VERY long page. As such, I am attempting to re-write this script so that it accepts a parameter which will determine how many elements to display. Any elements exceeding this number will be hidden until they are in the top 'x' number of elements. Here is an example of what I have attempted to implement.</p>
  
  <pre><code>$.fn.rotateEach = function (opts) {
      var $this = this,
          defaults = {
              delay: 5000,
              //Add a parameter named elementsShown, pass in a default value of 3
              elementsShown: 3
          },
          settings = $.extend(defaults, opts),
          rotator = function ($elems) {
              //Hide the elements that are past the number to be shown
              for (i = settings.elementsShown; i &lt;= $elems.eq; i++) {
                  $elems.eq(i).hide();
              }
              $elems.eq(0).slideUp(500, function () {
                  var $eq0 = $elems.eq(0).detach();
                  var $eqN = $elems.eq(settings.elementsShown) - 1;
                  //Check &amp; Show the element that is now within the show range
                  if ($elems.eq() == $eqN) {
                      $elems.eq($eqN).show('slow');
                  }
                  $elems.parent().append($eq0);
                  $eq0.fadeIn();
  
                  setTimeout(function () { rotator($($elems.selector)); },
                             settings.delay);
              });
          };
  </code></pre>