title: Slide dynamically added content with jQuery
body: <p>I'm trying to create a simple content slider that could handle dynamically added content to the slider. None of the "lightweight" plugins I found provided such functionality or, if it did, it didn't work correctly.</p>
  
  <pre><code>var $left = $('.left'),
      $right = $('.right'),
      $months = $('.sub ul');
  
  
  $left.click(function(){
      for(i = 0; i &lt; 3; i++){
          $months.find('li').first().before($.parseHTML('&lt;li&gt;xxx&lt;/li&gt;'));   
      }
      pos = $months.position();
      $months.css('left', pos.left + 90);
  });
  
  $right.click(function(){
      for(i = 0; i &lt; 3; i++){
          $months.find('li').last().after($.parseHTML('&lt;li&gt;xxx&lt;/li&gt;'));   
      }
      pos = $months.position();
      $months.css('left', pos.left - 90);
  });
  </code></pre>
  
  <p>This is the code I've got so far and here's a fiddle with an example - <a href="http://jsfiddle.net/kkr4zg0r/2/" rel="nofollow noreferrer">http://jsfiddle.net/kkr4zg0r/2/</a>. It kind of works, but the problem is that since new content is added the navigation goes off (you can see what I mean by clicking left-right a couple of times).</p>
  
  <p>I understand what's the problem for this - the newly added items "shift" the content and I need to do better calculations than substracting/adding 90px to the left position of the element but I can't figure out how to get the correct index of the elements and basically get this sliding by exactly (and correctly) by 3(or 6) elements at the time.<br>
  Currently the code is adding extra elements whenever a navigation button is pressed, if I could get the index of the currently visible first/last element, I could probably tell whether I need to add more elements and only add them then.</p>
  
  <p>This is a basic illustration of what I'm trying to achieve
  <img src="https://i.stack.imgur.com/qFtKC.png" alt="illustration"></p>
  
  <p><strong>edit</strong><br>
  I've changed the jsfiddle to the correct one.</p>