How do I animate a block of divs inside a container automatically?

I'm building a quote/testimonial display for a website and I want to be display multiple snippets inside the same container. The following image should help clarify the subsequent text ....

I have a container built into a sidebar and inside this container I've created another sub-container with a series of divs set to display:inline. What I would like to do is display div 01 and then, after a certain amount of time,开发者_StackOverflow社区 have the sub-container slide to the left and display div 02 - and so on.

Then, when it get's to the end, say div 10, I'd like it to continue sliding to the left and again display div 01 as opposed to sliding to the right - all the way back through all of the divs to reach div 01. CSS3 animate function or JS solutions are fine - whichever might work best.

This can be done in javascript with a circular carousel. jCarousel will do what you need if you can use jQuery by combining the auto-scrolling and circular capabilities.

$('#mycarousel').jcarousel({
    auto: 2, // auto-scroll every two seconds
    wrap: 'circular'
});

jCarousel uses ULs instead of divs, but I'm sure there's other plugins/libraries out there that may allow you to be more flexible with your structure.

If you wrap the items in a div like so and repeat the first item last:

--------------------------
|======= ======= ======= |
||div 1| |div 2| |div 1| |
|======= ======= ======= |
--------------------------

You can set a timer to move the left edge of the wrapper div <inner div width> every <x> seconds. Then, when you have reached the last one (which is a copy of the first), AFTER scrolling to it you simply move the entire wrapper back to a zero-left value and no one is the wiser - because it looks the same to them.

EDIT: I don't mean animate it back to square one, I mean simply set the left to zero. There would be no visual change, but you can then continue shifting left with no problems.