Infinite jQuery.animate and "carousel"?

Question

JavaScript

I did it like this: iempire.ru/example.html
(scrolls to the right by 600px, then in the opposite direction by 600, and so on to infinity with a recursive function)

How to make all blocks spin in one direction endlessly, i.e. when you exit from one edge of the screen appear from the other?

Preferably a solution without plugins.

Answer 1

I did the same for seamless images, you can easily change it to suit your needs.

Answer 2

rearrange elements or clone, obviously

Answer 3

Assume that
1) Given 5 blocks
2) Scope is limited and contains a known number of elements

[ 1 | 2 | 3 | 4 | 5 ]

[] - scope
During initialization, you need to clone the outer blocks so that there are no voids when scrolling:

2 | 3 | 4 | 5 [ 1 | 2 | 3 | 4 | 5] 1 | 2 | 3 | 4

We scroll the block, as soon as we reach the end of the original list, we reset the position to the block we need. For example:

1) 2 | 3 | 4 | 5 [ 1 | 2 | 3 | 4 | 5] 1 | 2 | 3 | 4
2) 2 | 3 | 4 | 5 | 1 [ 2 | 3 | 4 | 5 | 1 ] 2 | 3 | 4
3) 2 | 3 | 4 | 5 | 1 | 2 [ 3 | 4 | 5 | 1 | 2] 3 | 4
4) 2 | 3 | 4 | 5 | 1 | 2 | 3 [ 4 | 5 | 1 | 2 | 3] 4
5) 2 | 3 | 4 | 5 | 1 | 2 | 3 | 4 [ 5 | 1 | 2 | 3 | 4 ]
6) Reset
7) 2 | 3 | 4 | 5 [ 1 | 2 | 3 | 4 | 5] 1 | 2 | 3 | 4
eight) ....

Of the difficulties / restrictions:
* All blocks must be located in one row
* The maximum number of blocks can be limited (depends on the browser, if necessary, I can see in more detail what the problem was)
* When resizing the visibility area, various ugly artifacts are possible to avoid them - you can dynamically change the size of blocks
PS: There were some difficulties with cloning, so I settled on such an implementation.

Answer 4

I can advise plugins.jquery.com/project/jCarouselLite weighs only 2kb and there are various settings. Demo: gmarwaha.com/jquery/jcarousellite/index.php#demo

Answer 5

here is an example, it seems that this is what you need. There is not much code and you can figure out what and how it is implemented
jqueryfordesigners.com/demo/infinite-carousel.html

Answer 6

If on jQuery your example doesn't load, then try .appendTo() one way and .prependTo() the other, just transpose. periodically deleting the accumulated (if any)