How To Custom Animate <ul> Carousel Slider with jQuery?

Question

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.

Here's my HTML container:

<div class="carousel-nav" clearfix">
  <img src="img/prev.png" id="prv-testimonial">
  <img src="img/next.png" id="nxt-testimonial">
</div>
<div id="carousel-wrap">
  <ul id="testimonial-list" class="clearfix">
    <li>
      <p class="context">Some testimonial goes right here[1]</p>
      <span class="creds">Tiffany LastName</span>
    </li>
    <li>
      <p class="context">"We could not be more pleased. A++ efforts!"</p>
      <span class="creds">Alan Goodwrench</span>
    </li>
    <li>
      <p class="context">"After just one purchase, we know this is the company to stick with."</p>
      <span class="creds">Butters Stotch</span>
    </li>
  </ul>
</div>

The #carousel-wrap behaves as the viewport fixed at 400px(each list item is also 400px). The #testimonial-list 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.

Here is my very basic jQuery which honestly isn't performing as well as I'd hoped:

$('#prv-testimonial').on('click', function(){
  var lastitm = $('#testimonial-list li:last').remove();
  $('#testimonial-list li:first').before(lastitm);
});

There are only 2 things I need to figure out:

1. When a user clicks next/prev buttons how do I trigger the animation from right-to-left or vice-versa?

2. 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?

Any advice would be more than appreciated!

Solution

Here's a try:

$('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-400px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, 4000); });

$('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-400px' }, 4000, function() {
        $first.remove().css({ 'margin-left': '0px' });
        $('#testimonial-list li:last').after($first);
    });
});

I'm using the jquery .animate() function to animate the "margin-left" css style. The Next button animates and then moves the first element to the end of the list. The Previous button moves the last item to the front of the list and then animates.

BTW: The value "4000" is the duration of the animation in milliseconds.

jsfiddle

Comments

[Jake]

Oh this is a fantastic solution, and thanks for the fiddle too.