title: How To Custom Animate <ul> Carousel Slider with jQuery?
body: <p>I am working to build a small jQuery-based carousel without a plugin and I just can't seem to make the animations work. This isn't supposed to auto-rotate, but instead only rotate when the user clicks 'next' or 'prev' buttons. The only method I can get to work is automatically removing the last element to replace it just before the first element... this happens within a split-second and while it is continuous, there is no animation at all.</p>
  
  <p>Here's my HTML container:</p>
  
  <pre><code>&lt;div class="carousel-nav" clearfix"&gt;
    &lt;img src="img/prev.png" id="prv-testimonial"&gt;
    &lt;img src="img/next.png" id="nxt-testimonial"&gt;
  &lt;/div&gt;
  &lt;div id="carousel-wrap"&gt;
    &lt;ul id="testimonial-list" class="clearfix"&gt;
      &lt;li&gt;
        &lt;p class="context"&gt;Some testimonial goes right here[1]&lt;/p&gt;
        &lt;span class="creds"&gt;Tiffany LastName&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;p class="context"&gt;"We could not be more pleased. A++ efforts!"&lt;/p&gt;
        &lt;span class="creds"&gt;Alan Goodwrench&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;p class="context"&gt;"After just one purchase, we know this is the company to stick with."&lt;/p&gt;
        &lt;span class="creds"&gt;Butters Stotch&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <strong>#carousel-wrap</strong> behaves as the viewport fixed at 400px(each list item is also 400px). The <strong>#testimonial-list</strong> is dynamically resized in jQuery based on the total number of items... so 4 items at 400px ~= 1600px along with some margins/padding. This keeps all the testimonials next to each other so they should animate into view from the right/left side.</p>
  
  <p>Here is my very basic jQuery which honestly isn't performing as well as I'd hoped:</p>
  
  <pre><code>$('#prv-testimonial').on('click', function(){
    var lastitm = $('#testimonial-list li:last').remove();
    $('#testimonial-list li:first').before(lastitm);
  });
  </code></pre>
  
  <p>There are only 2 things I need to figure out:</p>
  
  <ol>
  <li><p>When a user clicks next/prev buttons how do I trigger the animation from right-to-left or vice-versa?</p></li>
  <li><p>Once the animation finishes, how do I ensure that the carousel will loop infinitely? How can I get the "prev" button to move from the 1st item all the way to the last item and still hold continuity?</p></li>
  </ol>
  
  <p>Any advice would be more than appreciated!</p>