Infinite jQuery.animate and "carousel"

0 like 0 dislike
21 views
Did this: iempire.ru/example.html
(scrolls to the right by 600px, then in the opposite direction at 600 and so on to infinity recursive f-tion)

How to make all the blocks turned in one direction infinitely, i.e. when you exit from one side of the screen appeared with the other?

Preferably a solution without plugins.
by | 21 views

6 Answers

0 like 0 dislike
I did the same for seamless images, can easily modify for your needs.
by
0 like 0 dislike
to rearrange elements, or clone, obviously
by
0 like 0 dislike
Suppose
1) 5 blocks
2) Scope is limited and contains a known number of elements
\r
\r
[ 1 | 2 | 3 | 4 | 5 ]
[] — the scope
\r
During initializatio need to clone the last block so that when you scroll to avoid cavities:
\r
2 | 3 | 4 | 5 [ 1 | 2 | 3 | 4 | 5 ] 1 | 2 | 3 | 4

A scrolling unit, as soon as we reach to the end of the original list reset the position to the desired block. For example:
\r
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 8) .... 

\r
Of difficulties/limitations:
* All units must be located in the same row
* Maximum number of blocks may be limited (depends on the browser, if you need more info to see what was the problem)
* When you change the size of scope there are various ugly artifacts to avoid them — you can dynamically change the size of the blocks
\r
\rPS: With the cloning of what was then the difficulty, so settled on this implementation.
by
0 like 0 dislike
I can advise plugins.jquery.com/project/jCarouselLite weighs just 2KB and has various settings. Demo: gmarwaha.com/jquery/jcarousellite/index.php#demo
by
0 like 0 dislike
here is an example, I think this is what you need. Not a lot of code and can understand what and how is implemented
\rjqueryfordesigners.com/demo/infinite-carousel.html
by
0 like 0 dislike
If jQuery is not loaded as your example , then try .appendTo() in the same direction and .prependTo() to another, just to carry. periodically removing the accumulated(if any)
by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
asked Mar 20, 2019 by propovednik
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
0 like 0 dislike
2 answers
110,608 questions
257,186 answers
0 comments
28,888 users