How To Make A Horitonzal Sliding Infinite Animation Using Css?

I'm trying to make an infinite horizontal slider with 3 rows of images. It looks like this: But as you see when the end of the rows of images arrive, there's a huge blank space wh

Solution 1:

basicly , You need to clone your elements.

At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.

So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.

Your case requires javascript.

So many images wrapping line by line needs to clone the whole ul.

A good compromise could be to split content within two ul, so one can to next once of screen.

To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.

jQuery DEMO of your fiddle.

$(".lists.slider1").clone().appendTo("body");$(".lists.slider2").clone().appendTo("body");$(".lists.slider3").clone().appendTo("body");

---

But for small "marquee like" , you can use pseudo elements to clone the first few images.

For text of a known length(em) or known container's width , you may use text-shadow.

Pseudo and text-shadow avoid duplication of content.

Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795