title: jQuery + slider plugin: fixed-width continuous slider with varied-width images
body: <p>I have a  with a set of images, all of which are the same height but different width. I need the  to stay at a fixed width, and I need the images to slide to the left in an infinite loop. I also need the images to fill the container width, so that even partial images display. The scrolling will happen in steps (e.g. 200px) and at a set interval.</p>
  
  <p>I have looked through a good number of jQuery slideshow plugins, including Cycle, NivoSlider, EasySlider, and half-a-dozen others. But none that I've seen seem to let me know exactly what a client needs wants it to do. I don't need clickable navigation, or centering. Just a continuous filmstrip that scrolls in set-width steps and a set interval.</p>
  
  <p>I was thinking, as far as the continuous-loop part is concerned, is that I could wait until the left-most image has gone out of sight. Originally, I tried just using <code>append()</code>, but the slides jumped when the left-most was moved to the end. So then I tried to <code>append()</code> a <code>clone()</code> of it to the end <code>$('#slides').children()</code>, then <code>remove()</code> it from the beginning of <code>$('#slides')</code>.</p>
  
  <p>So far, I have:</p>
  
  <pre><code>&lt;div id="outer" style="width:300px;"&gt;
      &lt;div id="slides"&gt;
          &lt;img src="/images/slide1.jpg" alt="" style="height:150px;width:200px;" /&gt;
          &lt;img src="/images/slide2.jpg" alt="" style="height:200px;width:200px;" /&gt;
          &lt;img src="/images/slide3.jpg" alt="" style="height:150px;width:200px;" /&gt;
          &lt;img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>/* some code ideas taken from easySlider */
  (function($){
      $.fn.stepSlider = function() {
          var slideInterval;
  
          this.each(function() {
              // this will be the width of $('#slides')
              var width = 0;
              // shortcut I saw in easySlider code; liked it, used it.
              var o = $(this);
              // set width of $('#slides') based on total width of child images
              o.children().each(function(){width+=$(this).width();});
  
              function scroll() {
                  o.children().each(
                      function(index){
                          // slide each of the children to the left by 150px
                          $(this).animate({'left':'-=150'}, 2000);
                      }
                  );
  
                  // after children have been animated() left, check to see
                  // if the left-most child has gone out of sight
                  if (o.children(':first-child').position().left + o.children(':first-child').width() &lt; 0) {
                      // cloning the first child now
                      var el = o.children(':first-child').clone(true);
                      // removing the first child
                      o .children(':first-child').remove();
                      // trying to reset the css('left') of all of the children now that the first
                      // element is supposed to be gone
                      o.children().css('left', o.children(':first-child').position().left + o.children(':first-child').width());
                      // appending the clone()
                      o.append(el);
                  }
              }
  
              slideInterval = setInterval(function(){scroll();}, 2000);
          });
      }
  })(jQuery);
  </code></pre>
  
  <p>The sliding works. But the shifting of the first image to the end causes the slides to jump. And then the thing just starts breaking down to the point of stopping altogether.</p>
  
  <p>Any insight is greatly appreciated. No, I'm not completely new to jQuery, but yes: this is my first plugin attempt.</p>
  
  <p>Thanks and best regards</p>