How can I make this jQuery carousel scroll right instead of left?

Question

I'm trying to make an image carousel/slider that automatically scrolls smoothly and loops using jQuery. Here's the function I'm using:

function spinCarousel() {  
  $("ul li:first-child").animate({ marginLeft: -200 }, 3000, 'linear', function () {
    $("ul li:first-child").appendTo('ul');
    $("ul li:last-child").css('margin-Left', 0);
    spinCarousel();
  });
}

And here's an illustration: https://jsfiddle.net/T_Recks/aa43n7g0/

I tried adding it to a local development site (replacing the text and colored backgrounds with images) and it seems to work nicely. However, I'd like to make a version that scrolls right instead of left, but haven't been able to figure it out. I've tried changing ".append" to ".prepend" and playing with the margin changes, but no luck so far.

Any suggestions?

Answer 1

I forked and retooled your JSFiddle to make it scroll from left to right. Check it out here: https://jsfiddle.net/1jw8xpqe/

Had to change a few things to get it working. First, the list is parsed to reverse the order of the slides and shift a couple of them so the leftmost one is "Item #1" when the slider initializes:

// reverse items
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

//  rearrange last two items so first slide starts on left 
list.prepend($('ul li:last-child').prev('li').andSelf());

Then a few CSS/JS tweaks: The slide animates the first li from -200px (defined in the CSS) to 0 , and after each cycle, prepends the last item of the ul to the start at -200px . Hope this helps!