Scrolling through multiple DIV elements

Question

For example let's say that I have a div element with 100% width and 100px height. Inside that div I have 6 div elements floated left, with overflow-x enabled. What I want to achieve is, that user can scroll through loop of these divs (so that last div element is followed by first - infinite loop).

Any idea how to approach?

Answer 1

You can use jQuery insertAfter and insertBefore functions

$('.next').click(function(){
     var last = $('#parent').find('div').last();
    $('#parent').find('div').first().insertAfter(last);
});

$('.prev').click(function(){
     var first= $('#parent').find('div').first();
    $('#parent').find('div').last().insertBefore(first);
});

Here is the DEMO