user1784025 user1784025 - 4 months ago 13
jQuery Question

Scrolling through multiple DIV elements

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?

enter image description here

Answer

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

Comments