How to encode a single div in an element using jQuery

Question

I am trying to check if the following is possible:

I want to be able to cyclically move one div inside an element [so that the beginning of the div is at the end of the same div as the loops.]

This does not have to be an existing plugin. I would prefer not to clone the div if possible. The width of the div will be set using javascript before the loop, but can be adjusted in small amounts.

I would be grateful for any ideas!

Answer 1

jsBin demo

JQuery

$('.scroller').each(function(){ $(this).find('img').clone().appendTo($(this)); }); (function move(){ $('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move); })(); 

HTML:

  <div class="scroller"> <img src="" alt="" /> </div> 

CSS

 .scroller{ width:310px; height:80px; white-space:nowrap; word-spacing:-1em; overflow:hidden; margin:30px; } .scroller img{ display:inline; } 

He will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.

NB: this is just a simple example, you can do 310px dynamic calculation, but this is another story, let it simplify it.

Answer 2

What about the marquee plugin?

Demo
Documentation

Please note that the first example in the demo, which scrolls left, if you set the width of the container to the same size or less than your content, to scroll through it, it will look cyclically.