title: How to move a Li tag from the first li to the last li to make a slider loop continuously
body: <p>I'm trying to make my slider loop to the first image without shooting back to the first image passing the others, but instead adding the first Li tag to the last Li tag when ever the next arrow is pressed so that it is always adding the previous Li tags with the images inside to the end. Also need it to work on the previous as well. </p>
  
  <p>This is how far I've got so far: </p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="slider corners"&gt;
          &lt;ul&gt;
              &lt;li class="corners"&gt;&lt;span class="corners"&gt;&lt;/span&gt;&lt;img src="../images/slider/image_1.png" width="854" height="393" alt="Image" /&gt;&lt;/li&gt;
              &lt;li class="corners"&gt;&lt;span class="corners"&gt;&lt;/span&gt;&lt;img src="../images/slider/image_2.png" width="854" height="393" alt="Image" /&gt;&lt;/li&gt;
              &lt;li class="corners"&gt;&lt;span class="corners"&gt;&lt;/span&gt;&lt;img src="../images/slider/image_3.png" width="854" height="393" alt="Image" /&gt;&lt;/li&gt;
          &lt;/ul&gt;                                              
  &lt;/div&gt;
  &lt;div id="slider-nav"&gt;
      &lt;button class="left_arrow" data-dir="prev"&gt;&lt;/button&gt;
      &lt;button class="right_arrow" data-dir="next"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$(function() {
  var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
      imgs = sliderUL.find('img'),
      imgWidth = imgs[0].width,
      imgsLen = imgs.length,
      current = 1, 
      totalImgsWidth = imgsLen * imgWidth; 
  
  $('#slider-nav').show().find('button').on('click', function() {
      var direction = $(this).attr('data-dir'),
      loc = imgWidth;     
  
      if ( direction === 'next' ) {
              $('.slider li').first().insertAfter( '.slider li:last');
          }else if ( direction === 'prev' ) {
              $('.slider li:last').insertAfter('.slider ul');
          }
  
      transition(sliderUL, loc, direction);
  }); 
  
  function transition( container, loc, direction ) {
      var unit; // -= +=
  
      if ( direction &amp;&amp; loc !== 0 ) {
          unit = ( direction === 'next' ) ? '-=' : '+=';
      }
  
      container.animate({
          'margin-left': unit ? (unit + loc) : loc
      });
  }
  </code></pre>
  
  <p>});</p>
  
  <p>I was wondering if it is anything obvious or if I have done this completely wrong.</p>